Repository: akveo/eva-icons
Branch: master
Commit: 70d2471ff88a
Files: 96
Total size: 140.2 KB
Directory structure:
gitextract_wrxiy02k/
├── .editorconfig
├── .gitignore
├── .stylelintrc.json
├── LICENSE.txt
├── README.md
├── angular.json
├── e2e/
│ ├── src/
│ │ ├── app.e2e-spec.ts
│ │ └── rounting.e2e-spec.ts
│ └── tsconfig.e2e.json
├── package/
│ ├── archive/
│ │ ├── Eva Icons.fig
│ │ └── Eva Icons.sketch
│ └── src/
│ ├── animation.scss
│ ├── default-attrs.json
│ ├── icon.js
│ ├── icons.js
│ ├── index.js
│ └── replace.js
├── package.json
├── scripts/
│ ├── config.js
│ ├── helpers/
│ │ ├── fs-helper.js
│ │ └── gm-helper.js
│ ├── index.js
│ ├── package.json
│ └── services/
│ ├── build-icons-json.js
│ ├── build-icons-object.js
│ ├── build-sprite-string.js
│ ├── build-sprite.js
│ ├── build-web-font.js
│ ├── merge-icons-json.js
│ ├── oprimize-svg.js
│ ├── process-pngs.js
│ ├── process-scss.js
│ ├── process-svgs.js
│ ├── rename-icon.js
│ ├── transform-icons.js
│ ├── transform-png-icons.js
│ ├── web-font-process-svgs.js
│ └── zip.js
├── src/
│ ├── app/
│ │ ├── @core/
│ │ │ ├── core.module.ts
│ │ │ ├── data/
│ │ │ │ ├── data.module.ts
│ │ │ │ └── service/
│ │ │ │ ├── icons/
│ │ │ │ │ ├── fill-icons-order.ts
│ │ │ │ │ ├── icon.service.ts
│ │ │ │ │ ├── icons-tags.ts
│ │ │ │ │ └── outline-icons-order.ts
│ │ │ │ └── url.service.ts
│ │ │ └── module-import-guard.ts
│ │ ├── @theme/
│ │ │ ├── components/
│ │ │ │ ├── animation-switcher/
│ │ │ │ │ ├── animation-switcher.component.html
│ │ │ │ │ ├── animation-switcher.component.scss
│ │ │ │ │ └── animation-switcher.component.ts
│ │ │ │ ├── footer/
│ │ │ │ │ ├── footer.component.html
│ │ │ │ │ ├── footer.component.scss
│ │ │ │ │ └── footer.component.ts
│ │ │ │ ├── header/
│ │ │ │ │ ├── header.component.html
│ │ │ │ │ ├── header.component.scss
│ │ │ │ │ └── header.component.ts
│ │ │ │ ├── icon-list/
│ │ │ │ │ ├── icon-list.component.html
│ │ │ │ │ ├── icon-list.component.scss
│ │ │ │ │ └── icon-list.component.ts
│ │ │ │ ├── modals/
│ │ │ │ │ └── download-icon/
│ │ │ │ │ ├── download-icon.component.html
│ │ │ │ │ ├── download-icon.component.scss
│ │ │ │ │ └── download-icon.component.ts
│ │ │ │ ├── page-container/
│ │ │ │ │ ├── page-container.component.html
│ │ │ │ │ ├── page-container.component.scss
│ │ │ │ │ └── page-container.component.ts
│ │ │ │ └── type-switcher/
│ │ │ │ ├── type-switcher.component.html
│ │ │ │ ├── type-switcher.component.scss
│ │ │ │ └── type-switcher.component.ts
│ │ │ ├── pipes/
│ │ │ │ └── eva-icons.pipe.ts
│ │ │ ├── services/
│ │ │ │ ├── analytics.service.ts
│ │ │ │ ├── dialog-state.service.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── version.service.ts
│ │ │ ├── styles/
│ │ │ │ ├── _raleway.scss
│ │ │ │ ├── styles.scss
│ │ │ │ └── themes.scss
│ │ │ └── theme.module.ts
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets/
│ │ └── .gitkeep
│ ├── browserslist
│ ├── environments/
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── index.html
│ ├── karma.conf.js
│ ├── main.ts
│ ├── polyfills.ts
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── test.html
├── tsconfig.json
├── tslint.json
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: .gitignore
================================================
# compiled output
/dist
/tmp
/out-tsc
/package-build
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
# System Files
.DS_Store
Thumbs.db
debug.log
local.log
================================================
FILE: .stylelintrc.json
================================================
{
"rules": {
"color-hex-case": "lower",
"color-no-invalid-hex": true,
"function-calc-no-unspaced-operator": true,
"function-comma-space-after": "always-single-line",
"function-comma-space-before": "never",
"function-name-case": "lower",
"function-url-quotes": "always",
"function-whitespace-after": "always",
"number-leading-zero": "always",
"number-no-trailing-zeros": true,
"length-zero-no-unit": true,
"string-no-newline": true,
"string-quotes": "single",
"unit-case": "lower",
"unit-no-unknown": true,
"unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "s", "rem"],
"value-list-comma-space-after": "always-single-line",
"value-list-comma-space-before": "never",
"shorthand-property-no-redundant-values": true,
"property-case": "lower",
"declaration-block-no-duplicate-properties": [ true, {
"ignore": ["consecutive-duplicates-with-different-values"]
}],
"declaration-block-trailing-semicolon": "always",
"declaration-block-single-line-max-declarations": 1,
"declaration-block-semicolon-space-before": "never",
"declaration-block-semicolon-space-after": "always-single-line",
"declaration-block-semicolon-newline-before": "never-multi-line",
"declaration-block-semicolon-newline-after": "always-multi-line",
"declaration-property-value-blacklist": [
{ "/.*/": ["initial"] },
{ "message": "The `initial` value is not supported in IE."}
],
"block-closing-brace-newline-after": [
"always",
{
"ignoreAtRules": ["if", "else"]
}
],
"block-closing-brace-newline-before": "always-multi-line",
"block-opening-brace-newline-after": "always-multi-line",
"block-opening-brace-space-before": "always-multi-line",
"selector-attribute-brackets-space-inside": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-operator-space-before": "never",
"selector-combinator-space-after": "always",
"selector-combinator-space-before": "always",
"selector-pseudo-class-case": "lower",
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-pseudo-element-case": "lower",
"selector-pseudo-element-colon-notation": "double",
"selector-pseudo-element-no-unknown": [true, {
"ignorePseudoElements": ["ng-deep"]
}],
"selector-type-case": "lower",
"selector-max-id": 0,
"no-missing-end-of-source-newline": true,
"max-line-length": 120
}
}
================================================
FILE: LICENSE.txt
================================================
The MIT License (MIT)
Copyright (c) 2018 Akveo.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<h1><img src="https://i.imgur.com/cXYo5bi.png"> Eva Icons</h1>
<img src="https://i.imgur.com/oDmqDkE.jpg">
**Eva Icons** is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4 animation types: `zoom`, `pulse`, `shake` and `flip`. Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types: `Fill` and `Outline` and in several formats, including `PNG`, `SVG`, `font`, `Sketch`, etc.
## Download
- [Complete Eva Icons Package](https://akveo.github.io/eva-icons/eva-icons.zip)
- [NPM Package](https://www.npmjs.com/package/eva-icons)
- you also can download icons one by one in `PNG` and `SVG` formats from [Eva Icons Website](https://akveo.github.io/eva-icons/?utm_campaign=eva_icons%20-%20home%20-%20eva_icons%20github%20readme&utm_source=eva_icons&utm_medium=referral&utm_content=github_readme_download_eva_icons).
### CDN
Load from CDN in your project:
```html
<script src="https://unpkg.com/eva-icons"></script>
```
After including the script, `eva` will be available as a global variable.
### NPM
- Install the package:
```
npm i eva-icons
```
- Include it to your page:
```html
<script src="path/to/dist/eva-icons.js"></script>
```
- Or require the package (may vary depending on your build system):
```js
const eva = require('eva-icons');
```
```js
import * as eva from 'eva-icons';
```
## How to use
### JavaScript
- Add the `data-eva` attribute with the icon name to an element:
```html
<i data-eva="github"></i>
```
- Call `eva.replace();` to replace all elements with the `data-eva` data attribute with SVG elements. You can also pass some additional parameters to the `replace` method to modify the `replace` function behavior.
```html
<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/eva-icons"></script>
<body>
<i data-eva="github"></i>
<script>
eva.replace()
</script>
</body>
</html>
```
*Thanks to Feather Icons for the build process inspiration.*
- Additional attributes:
* `data-eva-fill`: set icon color
* `data-eva-height`: set icon height
* `data-eva-width`: set icon width
* `data-eva-animation`: [set icon animation](#animation)
```html
<i data-eva="github" data-eva-fill="#ff0000" data-eva-height="48" data-eva-width="48"></i>
```
### Fonts
Eva Icons are also available as a Web Font.
- Include the font css into your page:
```html
<link href="path/to/style/eva-icons.css">
```
- Add `eva` and `eva-icon` classes to an element:
```html
<i class="eva eva-github"></i>
```
We recommend using SVG icons due to better rendering and performance capabilities, [more details](https://css-tricks.com/icon-fonts-vs-svg/).
## Documentation
### `eva.replace(options)`
Replaces all elements that have a `data-eva` attribute with SVG markup.
`options` optional object.
#### Available 'option' properties:
| Name | Type | Default value | Description |
|------| ------ | ------------- |-------------|
| fill | string | none | Icon color |
| width | string or number | 24px | Icon width |
| height | string or number | 24px | Icon height |
| class | string | none | Custom css class |
| animation | object | none | [Icon animation](#animation) |
### Animation
- Add the `data-eva-animation` attribute with the animation type `(zoom, pulse, shake and flip)` to an element:
```html
<i data-eva="github" data-eva-animation="zoom"></i>
```
- Additional animation attributes:
* `data-eva-hover`: Makes the animation available on hover. Default value is `true`. Available true or false.
* `data-eva-infinite`: Makes the animation infinite. Default value is `false`. Available true or false.
```html
<i data-eva="github" data-eva-animation="zoom" data-eva-hover="false" data-eva-infinite="true"></i>
```
> **Note:** In the above example `github icon` will be always animated. This type of animation will be applied only to current icons.
- Pass animation as property in a `eva.replace` method.
```js
eva.replace({
animation: {
type: string, // zoom, pulse, shake, flip
hover: boolean, // default true
infinite: boolean, // default false
}
});
```
> **Note:** The animation will be applied to all replaced elements.
- Add `eva-parent-hover` class to the parent container in a case you want to activate the animation hovering on the parent element.
```html
<div class="eva-parent-hover">
<i data-eva="github" data-eva-animation="zoom"></i>
Zoom animation
</div>
```
## 3rd party implementations
- [React Native](https://github.com/artyorsh/react-native-eva-icons)
- [Flutter](https://github.com/piyushmaurya23/eva_icons_flutter)
## License
[MIT](LICENSE.txt) license.
## More from Akveo
- [Nebular](https://github.com/akveo/nebular) - Angular Components, Auth and Security
- [ngx-admin](https://github.com/akveo/ngx-admin) - the best Angular admin template
## How can I support the developers?
- Star our GitHub repo :star:
- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
- Follow us on [Twitter](https://twitter.com/akveo_inc) :feet:
- Like our page on [Facebook](https://www.facebook.com/akveo/) :thumbsup:
## From Developers
Made with :heart: by [Akveo team](https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20github%20readme&utm_source=eva_icons&utm_medium=referral&utm_content=readme_made_with_heart). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
We're always happy to receive your feedback!
================================================
FILE: angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"eva-icons": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"preserveSymlinks": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "package-build/fill", "output": "./fill" },
{ "glob": "**/*", "input": "package-build/outline", "output": "./outline" },
{ "glob": "**/*.zip", "input": "package-build/", "output": "./" }
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/app/@theme/styles/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "eva-icons:build"
},
"configurations": {
"production": {
"browserTarget": "eva-icons:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "eva-icons:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/app/@theme/styles/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"eva-icons-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "eva-icons:serve"
},
"configurations": {
"production": {
"devServerTarget": "eva-icons:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "eva-icons",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
================================================
FILE: e2e/src/app.e2e-spec.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { browser, element, by } from 'protractor';
describe('App common behavior', () => {
beforeEach((done) => {
browser.get('').then(() => done());
});
it('should be active outline', () => {
element(by.css('eva-type-switcher .nav-item.active span')).getText().then(value => {
expect(value).toEqual('Outline');
});
});
it('should contain list of icons', () => {
element.all(by.css('eva-icon-list nb-card')).count()
.then((count) => {
expect(count).toBeGreaterThan(10);
});
});
it('should search "brush" icon', () => {
element(by.css('.search-input')).sendKeys('brush')
.then(() => {
return browser.wait(() => {
return element
.all(by.css('eva-icon-list nb-card:not(.fake-card)'))
.count()
.then((count) => {
return count === 1;
});
}, 100);
});
});
it('should open download icon popup', () => {
element(by.css('eva-icon-list nb-card:nth-of-type(1)'))
.click()
.then(() => {
const downloadIconPopup = element(by.css('eva-download-icon')).isDisplayed();
expect(downloadIconPopup).toBeTruthy();
});
});
});
================================================
FILE: e2e/src/rounting.e2e-spec.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { browser, element, by } from 'protractor';
describe('Routing', () => {
it('should open outline page', (done) => {
browser.get('#/?type=outline')
.then(() => {
element(by.css('eva-type-switcher .nav-item.active span'))
.getText()
.then(value => {
expect(value).toEqual('Outline');
done();
});
});
});
it('should open fill page', (done) => {
browser.get('#/?type=fill')
.then(() => {
element(by.css('eva-type-switcher .nav-item.active span'))
.getText()
.then(value => {
expect(value).toEqual('Fill');
done();
});
});
});
it('should open fill page with github icon', (done) => {
browser.get('#/?type=fill&searchKey=github')
.then(() => {
element
.all(by.css('eva-icon-list nb-card:not(.fake-card)'))
.count()
.then(value => {
expect(value).toEqual(1);
done();
});
});
});
});
================================================
FILE: e2e/tsconfig.e2e.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
================================================
FILE: package/src/animation.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
.eva-animation {
animation-duration: 1s;
animation-fill-mode: both;
}
.eva-infinite {
animation-iteration-count: infinite;
}
.eva-icon-shake {
animation-name: eva-shake;
}
.eva-icon-zoom {
animation-name: eva-zoomIn;
}
.eva-icon-pulse {
animation-name: eva-pulse;
}
.eva-icon-flip {
animation-name: eva-flipInY;
}
.eva-hover {
display: inline-block;
}
.eva-hover, .eva-parent-hover {
&:hover {
.eva-icon-hover-shake {
animation-name: eva-shake;
}
.eva-icon-hover-zoom {
animation-name: eva-zoomIn;
}
.eva-icon-hover-pulse {
animation-name: eva-pulse;
}
.eva-icon-hover-flip {
animation-name: eva-flipInY;
}
}
}
@keyframes eva-flipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
@keyframes eva-shake {
from,
to {
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-3px, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(3px, 0, 0);
}
}
@keyframes eva-pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.2, 1.2, 1.2);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes eva-zoomIn {
from {
opacity: 1;
transform: scale3d(0.5, 0.5, 0.5);
}
50% {
opacity: 1;
}
}
================================================
FILE: package/src/default-attrs.json
================================================
{
"xmlns": "http://www.w3.org/2000/svg",
"width": 24,
"height": 24,
"viewBox": "0 0 24 24"
}
================================================
FILE: package/src/icon.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import classnames from 'classnames/dedupe';
import DEFAULT_ATTRS from './default-attrs.json';
const defaultAnimationOptions = {
hover: true,
};
const isString = (value) => typeof value === 'string' || value instanceof String;
class Icon {
constructor(name, contents) {
this.name = name;
this.contents = contents;
this.attrs = {
...DEFAULT_ATTRS,
...{ class: `eva eva-${name}` },
};
}
toSvg(attrs = {}) {
const { animation, ...remAttrs } = attrs;
const animationOptions = getAnimationOptions(animation);
const animationClasses = animationOptions ? animationOptions.class : '';
const combinedAttrs = {
...this.attrs,
...remAttrs,
...{ class: classnames(this.attrs.class, attrs.class, animationClasses) },
};
const svg = `<svg ${attrsToString(combinedAttrs)}>${this.contents}</svg>`;
return !!animationOptions ? animationOptions.hover ? `<i class="eva-hover">${svg}</i>` : svg : svg;
}
toString() {
return this.contents;
}
}
function getAnimationOptions(animation) {
if (!animation) {
return null;
}
if (animation.hover) {
animation.hover = isString(animation.hover) ? JSON.parse(animation.hover) : animation.hover;
}
const mergedAnimationOptions = {
...defaultAnimationOptions,
...animation,
};
const animationType = mergedAnimationOptions.hover ?
`eva-icon-hover-${mergedAnimationOptions.type}` :
`eva-icon-${mergedAnimationOptions.type}`;
mergedAnimationOptions.class = classnames(
{
'eva-animation': true,
'eva-infinite': isString(animation.infinite) ? JSON.parse(animation.infinite) : animation.infinite,
},
animationType,
);
return mergedAnimationOptions;
}
function attrsToString(attrs) {
return Object.keys(attrs)
.map(key => `${key}="${attrs[key]}"`)
.join(' ');
}
export default Icon;
================================================
FILE: package/src/icons.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import Icon from './icon';
import icons from '../../package-build/eva-icons.json';
export default Object.keys(icons)
.map(key => new Icon(key, icons[key]))
.reduce((object, icon) => {
object[icon.name] = icon;
return object;
}, {});
================================================
FILE: package/src/index.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import icons from './icons';
import replace from './replace';
import style from './animation.scss';
if (typeof window !== 'undefined') {
style._insertCss();
}
export { icons, replace };
================================================
FILE: package/src/replace.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import classnames from 'classnames/dedupe';
import icons from './icons';
const animationKeys = {
'data-eva-animation': 'type',
'data-eva-hover': 'hover',
'data-eva-infinite': 'infinite',
};
const dataAttributesKeys = {
'data-eva': 'name',
'data-eva-width': 'width',
'data-eva-height': 'height',
'data-eva-fill': 'fill',
};
function replace(options = {}) {
if (typeof document === 'undefined') {
throw new Error('`eva.replace()` only works in a browser environment.');
}
const elementsToReplace = document.querySelectorAll('[data-eva]');
Array.from(elementsToReplace).forEach(element =>
replaceElement(element, options),
);
}
function replaceElement(element, options = {}) {
const { name, ...elementAttrs } = getAttrs(element);
const svgString = icons[name].toSvg({
...options,
...elementAttrs,
animation: getAnimationObject(options.animation, elementAttrs.animation),
...{ class: classnames(options.class, elementAttrs.class) },
});
const svgDocument = new DOMParser().parseFromString(
svgString,
'text/html',
);
const svgElement = svgDocument.querySelector('.eva-hover') || svgDocument.querySelector('svg');
element.parentNode.replaceChild(svgElement, element);
}
function getAttrs(element) {
return Array.from(element.attributes).reduce((attrs, attr) => {
if (!!animationKeys[attr.name]) {
attrs['animation'] = {
...attrs['animation'],
[animationKeys[attr.name]]: attr.value,
};
} else {
attrs = {
...attrs,
...getAttr(attr),
};
}
return attrs;
}, {});
}
function getAttr(attr) {
if (!!dataAttributesKeys[attr.name]) {
return ({
[dataAttributesKeys[attr.name]]: attr.value,
});
}
return ({
[attr.name]: attr.value,
});
}
function getAnimationObject(optionsAnimation, elementAttrsAnimation) {
if (optionsAnimation || elementAttrsAnimation) {
return ({
...optionsAnimation,
...elementAttrsAnimation,
});
}
return null;
}
export default replace;
================================================
FILE: package.json
================================================
{
"name": "eva-icons-landing",
"version": "1.1.3",
"browserslist": [
"> 1%",
"last 2 versions",
"IE 11"
],
"scripts": {
"ng": "ng",
"ngh": "ngh",
"start": "ng serve --port 3333 --host 0.0.0.0",
"build": "ng build",
"build:prod": "npm run icons:prepare && npm run build -- --prod --aot --base-href /eva-icons/",
"test": "ng test",
"lint": "ng lint",
"lint:fix": "ng lint eva-icons --fix",
"lint:styles": "stylelint ./src/**/*.scss",
"lint:ci": "npm run lint && npm run lint:styles",
"e2e": "ng e2e",
"prepush": "npm run lint:ci",
"build:icons": "node ./scripts/index.js",
"icons:prepare": "npm run build:icons && webpack",
"publish": "npm publish --access=public package-build",
"gh-pages": "npm run build:prod && npm run ngh -- --dir ./dist --no-silent"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@nebular/theme": "^2.0.2",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"file-saver": "^1.3.8",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cdk": "^6.4.7",
"@angular/cli": "~6.1.4",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@nebular/bootstrap": "^2.0.2",
"@types/file-saver": "^1.3.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"angular-cli-ghpages": "^0.5.3",
"archiver": "^3.0.0",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.2",
"cheerio": "^1.0.0-rc.2",
"classnames": "^2.2.6",
"codelyzer": "~4.2.1",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"fs-extra": "^7.0.0",
"globby": "^8.0.1",
"gm": "^1.23.1",
"html-minifier": "^3.5.20",
"isomorphic-style-loader": "^5.1.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"lazy-require": "^2.2.0",
"protractor": "~5.4.0",
"stylelint": "^9.5.0",
"svgo": "^1.1.1",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2",
"uglifyjs-webpack-plugin": "^2.0.1",
"webfont": "^8.1.4",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-merge": "^4.1.4"
}
}
================================================
FILE: scripts/config.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const path = require('path');
const config = {
'convertOptions': {
'png': {
'sizes': ['128']
}
},
'copy': [
{
'format': 'svg'
},
],
'srcPath': path.join(__dirname, `../package/icons`),
'desPath': path.join(__dirname, `../package-build`),
'defaultExtension': 'svg'
};
module.exports = config;
================================================
FILE: scripts/helpers/fs-helper.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const fileSystemHelper = {
remove(srcPath) {
return fs.remove(srcPath);
},
getFilesByPath(srcPath) {
return new Promise((resolve, reject) => {
fs.readdir(srcPath, (err, files) => {
if (err) {
reject(err);
}
const output = {
files,
fileNames: files.map((file) => this.trimFileExtension(file))
};
resolve(output);
})
});
},
mkDirByPathSync(targetDir) {
if (fs.pathExistsSync(targetDir)) {
return;
}
return fs.mkdirsSync(targetDir);
},
copy(srcPath, desPath) {
if (fs.pathExistsSync(srcPath)) {
return fs.copy(srcPath, desPath);
}
return Promise.resolve();
},
isFolder(path) {
return fs.lstatSync(path).isDirectory();
},
getExtension(fileName) {
return fileName
.slice((Math.max(0, fileName.lastIndexOf('.')) || Infinity) + 1);
},
trimFileExtension(fileName) {
return fileName.replace(/\.[^/.]+$/, '');
},
};
module.exports = fileSystemHelper;
================================================
FILE: scripts/helpers/gm-helper.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const gm = require('gm').subClass({imageMagick: true});
const graphicsMagickHelper = {
convertAndResize(size, format, srcPath) {
return gm(srcPath)
.resize(size, size)
.setFormat(format);
},
convert(format, srcPath) {
return gm(srcPath)
.setFormat(format);
},
resize(size, srcPath) {
return gm(srcPath)
.resize(size, size);
},
convertSvgToPng(size, format, srcPath) {
return gm(srcPath)
.in('-size', `${size}x${size}`)
.background('transparent')
.setFormat(format);
}
};
module.exports = graphicsMagickHelper;
================================================
FILE: scripts/index.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const path = require('path');
const config = require('./config');
const fileSystemHelper = require('./helpers/fs-helper');
const processSvgs = require('./services/process-svgs');
const processPngs = require('./services/process-pngs');
const buildIconsJSON = require('./services/build-icons-json');
const buildSprite = require('./services/build-sprite');
const renameIcons = require('./services/rename-icon');
const mergeIconsJSON = require('./services/merge-icons-json');
const zip = require('./services/zip');
const buildWebFont = require('./services/build-web-font');
const renameSrcIcons = (srcPath, srcIcons, postfix, extension) => {
if (postfix.toLowerCase() === 'outline') {
return renameIcons(srcPath, srcIcons, postfix, extension);
}
return Promise.resolve(srcIcons);
};
const prepareSvgIcons = (icons, srcPath, desPath) => {
const desSvgPath = path.join(desPath, 'svg');
return processSvgs(icons, srcPath, desSvgPath);
};
const preparePngIcons = (icons, srcPath, desPath) => {
const desPngPath = path.join(desPath, 'png');
return processPngs(icons, srcPath, desPngPath);
};
const merge = () => {
return fileSystemHelper.getFilesByPath(config.desPath)
.then(sourceFiles => {
return mergeIconsJSON(sourceFiles.files)
.then(() => buildSprite('eva'));
});
};
const copyPackageJson = () => {
const fileName = 'package.json';
const srcPath = path.join(__dirname, fileName);
const desPath = path.join(config.desPath, fileName);
return fileSystemHelper.copy(srcPath, desPath);
};
const copyReadme = () => {
const fileName = 'README.md';
const srcPath = path.join(__dirname, '..', fileName);
const desPath = path.join(config.desPath, fileName);
return fileSystemHelper.copy(srcPath, desPath);
};
fileSystemHelper.remove(config.desPath)
.then(() => {
return fileSystemHelper.getFilesByPath(config.srcPath)
.then((srcDirectories) => {
const srcFolders = srcDirectories.files;
return Promise.all(srcFolders.map((folder) => {
const srcIconsPath = path.join(config.srcPath, folder, config.defaultExtension);
const desIconsPath = path.join(config.desPath, folder);
return fileSystemHelper.getFilesByPath(srcIconsPath)
.then((sourceIcons) => {
return renameSrcIcons(srcIconsPath, sourceIcons.files, folder, 'svg')
.then((renamedFiles) => Promise.all([
prepareSvgIcons(renamedFiles, srcIconsPath, desIconsPath),
preparePngIcons(renamedFiles, srcIconsPath, desIconsPath),
])
.then(() => buildIconsJSON(renamedFiles, path.join(desIconsPath, 'svg'), folder))
.then(() => buildSprite(folder))
);
});
}))
.then(() => merge())
.then(() => {
const archivePath = path.join(config.srcPath, '../archive');
zip(srcDirectories.files, archivePath);
});
})
})
.then(() => buildWebFont())
.then(() => copyPackageJson())
.then(() => copyReadme())
.catch((error) => {
const errorMessage = error && error.message ? error.message : `${error}, Smth went wrong`;
console.error(errorMessage);
});
================================================
FILE: scripts/package.json
================================================
{
"name": "eva-icons",
"version": "1.1.3",
"description": "Eva Icons - beautifully crafted Open Source UI icons for common actions and items.",
"main": "eva.js",
"unpkg": "eva.min.js",
"license": "MIT",
"author": "akveo",
"repository": {
"type": "git",
"url": "git+https://github.com/akveo/eva-icons.git"
},
"bugs": {
"url": "https://github.com/akveo/eva-icons/issues"
},
"homepage": "https://github.com/akveo/eva-icons#readme",
"keywords": [
"fonts",
"icon font",
"icons",
"nebular",
"akveo",
"web font"
]
}
================================================
FILE: scripts/services/build-icons-json.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const path = require('path');
const config = require('../config');
const buildIconsObject = require('./build-icons-object');
const getSvg = srcPath => svgFile => fs.readFileSync(path.join(srcPath, svgFile));
const buildIconsJSON = (srcIcons, srcPath, folder) => {
const prefix = folder.toLowerCase();
const outFileName = `${prefix}-icons.json`;
const outFile = path.resolve(config.desPath, outFileName);
return new Promise((resolve) => {
const icons = buildIconsObject(srcIcons, getSvg(srcPath));
console.log(`Building ${outFile}...`);
fs.writeFileSync(outFile, JSON.stringify(icons));
resolve();
});
};
module.exports = buildIconsJSON;
================================================
FILE: scripts/services/build-icons-object.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const path = require('path');
const cheerio = require('cheerio');
const htmlMinifier = require('html-minifier');
const getSvgContents = (svg) => {
const $ = cheerio.load(svg, { xmlMode: true });
return htmlMinifier.minify(
$('svg').html(),
{
collapseWhitespace: true,
keepClosingSlash : true,
});
};
const buildIconsObject = (svgFiles, getSvg) => {
return svgFiles
.map(svgFile => {
const name = path.basename(svgFile, '.svg');
const svg = getSvg(svgFile);
const contents = getSvgContents(svg);
return { name, contents };
})
.reduce((icons, icon) => {
icons[icon.name] = icon.contents;
return icons;
}, {});
};
module.exports = buildIconsObject;
================================================
FILE: scripts/services/build-sprite-string.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const DEFAULT_ATTRS = require('../../package/src/default-attrs.json');
const toSvgSymbol = (name, contents) => {
return `<symbol id="${name}" viewBox="${DEFAULT_ATTRS.viewBox}">${
contents
}</symbol>`;
};
const buildSpriteString = (icons) => {
const symbols = Object.keys(icons)
.map(icon => toSvgSymbol(icon, icons[icon]))
.join('');
return `<svg xmlns="${DEFAULT_ATTRS.xmlns}"><defs>${symbols}</defs></svg>`;
};
module.exports = buildSpriteString;
================================================
FILE: scripts/services/build-sprite.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const path = require('path');
const lazyRequire = require('lazy-require');
const config = require('../config');
const buildSpriteString = require('./build-sprite-string');
const buildSprite = (folder) => {
const prefix = folder.toLowerCase();
const inFileName = `${prefix}-icons.json`;
const outFileName = `${prefix}-sprite.svg`;
const inFile = path.join(config.desPath, inFileName);
const outFile = path.join(config.desPath, outFileName);
return new Promise((resolve) => {
lazyRequire.sync(inFile, (error, icons) => {
console.log(`Building ${outFile}...`);
fs.writeFileSync(outFile, buildSpriteString(icons));
resolve();
});
});
};
module.exports = buildSprite;
================================================
FILE: scripts/services/build-web-font.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const webfont = require('webfont').default;
const path = require('path');
const fs = require('fs-extra');
const processScss = require('./process-scss');
const prepareSVGsForFonts = require('./web-font-process-svgs');
const config = require('../config');
const fileSystemHelper = require('../helpers/fs-helper');
const webFontOptions = {
files: path.resolve(config.desPath, '**/icons/svg/*.svg'),
fontName: 'Eva-Icons',
template: 'css',
templateFontName: 'Eva-Icons',
templateClassName: 'eva',
templateFontPath: './fonts',
normalize: true,
fontHeight: 600,
};
const buildFont = () => {
const dest = path.join(config.desPath, '/style/fonts');
const destTemplate = path.join(config.desPath, '/style');
fileSystemHelper.mkDirByPathSync(dest);
return prepareSVGsForFonts()
.then(() => {
return webfont(webFontOptions)
.then((result) => {
const { fontName, template } = result.config;
return Promise.all(
Object.keys(result).map(type => {
if (
type === 'config' ||
type === 'usedBuildInTemplate' ||
type === 'glyphsData'
) {
return Promise.resolve();
}
const content = result[type];
let file = null;
if (type !== 'template') {
file = path.resolve(dest, `${fontName}.${type}`);
} else {
file = path.resolve(destTemplate, `${fontName.toLowerCase()}.${template}`);
}
return fs.outputFile(file, content);
}))
.then(() => processScss())
.then(() => fileSystemHelper.remove(path.join(config.desPath, '/style/icons')));
});
});
};
module.exports = buildFont;
================================================
FILE: scripts/services/merge-icons-json.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const path = require('path');
const config = require('../config');
const mergeIconsJSON = (files) => {
const outFileName = 'eva-icons.json';
const outFile = path.join(config.desPath, outFileName);
return new Promise((resolve) => {
const fileContent = files
.filter(file => path.extname(file) === '.json')
.reduce((result, item) => {
const content = fs.readFileSync(path.join(config.desPath, item), 'utf-8');
return {
...result,
...JSON.parse(content),
};
}, {});
console.log(`Building ${outFile}...`);
fs.writeFileSync(outFile, JSON.stringify(fileContent));
resolve();
});
};
module.exports = mergeIconsJSON;
================================================
FILE: scripts/services/oprimize-svg.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const Svgo = require('svgo');
const defaultOptions = [
{ convertShapeToPath: false },
{ mergePaths: false },
{ inlineStyles: { onlyMatchedOnce: false } },
{ removeAttrs: { attrs: '(fill|stroke.*)' } },
{ removeTitle: true },
];
const optimizeSvg = (svg, options = []) => {
const svgo = new Svgo({
plugins: defaultOptions.concat(options),
});
return svgo.optimize(svg)
.then(({ data }) => data );
};
module.exports = optimizeSvg;
================================================
FILE: scripts/services/process-pngs.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const path = require('path');
const config = require('../config');
const TransformPngIcons = require('./transform-png-icons');
const processPngs = (srcFiles, srcPath, desPath) => {
return Promise.all(srcFiles.map((srcFile) => {
const srcFilePath = path.join(srcPath, srcFile);
const fileTransformOptions = {
convertTo: 'png',
...config.convertOptions.png,
};
const transformPng = new TransformPngIcons(srcFile, srcFilePath, desPath, fileTransformOptions);
transformPng.convertAndResizeSvgToPng();
}));
};
module.exports = processPngs;
================================================
FILE: scripts/services/process-scss.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const path = require('path');
const fs = require('fs-extra');
const config = require('../config');
const fileSystemHelper = require('../helpers/fs-helper');
const genScssRoot = (scssRoot) => {
const buildScss = './eva-icons.scss';
const rootFileContent = `
@import 'eva-icons-variables';
@import 'eva-icons-font';
`;
return new Promise((resolve, reject) => {
fs.writeFile(
path.join(scssRoot, buildScss),
rootFileContent,
'utf8',
(error) => {
if (error) {
reject(error);
}
resolve();
},
);
});
};
const genScssVariables = (scssRoot) => {
const buildScss = './_eva-icons-variables.scss';
const variablesContent = `
$eva-icons-font-path: '../fonts' !default;
$eva-icons-font-family: 'Eva-Icons' !default;
`;
return new Promise((resolve, reject) => {
fs.writeFile(
path.join(scssRoot, buildScss),
variablesContent,
'utf8',
(error) => {
if (error) {
reject(error);
}
resolve();
},
);
});
};
const genScssFont = (scssRoot) => {
const buildScss = './_eva-icons-font.scss';
const buildCss = path.join(config.desPath, 'style/eva-icons.css');
const file = fs.readFileSync(buildCss).toString();
const content = file
.replace(/"/g, '\'')
.replace(/\.\/fonts/g, '#{$eva-icons-font-path}')
.replace(/(font-family: )(.*)(;)/g, '$1#{$eva-icons-font-family}$3');
return new Promise((resolve, reject) => {
fs.writeFile(
path.join(scssRoot, buildScss),
content,
(error) => {
if (error) {
reject(error);
}
resolve();
},
);
});
};
const processScss = () => {
const scssRoot = path.join(config.desPath, '/style/scss');
fileSystemHelper.mkDirByPathSync(scssRoot);
return Promise.all([
genScssRoot(scssRoot),
genScssVariables(scssRoot),
genScssFont(scssRoot),
]);
};
module.exports = processScss;
================================================
FILE: scripts/services/process-svgs.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const path = require('path');
const fileSystemHelper = require('../helpers/fs-helper');
const optimizeSvg = require('./oprimize-svg');
const processSvgs = (svgFiles, srcPath, desPath) => {
fileSystemHelper.mkDirByPathSync(desPath);
return Promise.all(svgFiles.map((svgFile) => {
const svgPath = path.join(srcPath, svgFile);
const desSvgPath = path.join(desPath, svgFile);
const svg = fs.readFileSync(svgPath);
return optimizeSvg(svg, [ { removeHiddenElems: false } ])
.then((processedSvg) => {
fs.writeFileSync(desSvgPath, processedSvg);
});
}));
};
module.exports = processSvgs;
================================================
FILE: scripts/services/rename-icon.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const path = require('path');
const fileSystemHelper = require('../helpers/fs-helper');
const getNewFileName = (srcFile, extension, postfix) => `${path.basename(srcFile, `.${extension}`)}-${postfix}.${extension}`;
const renameIcons = (srcPath, srcIcons, postfix, commonExtension) => {
return Promise.all(srcIcons.map((srcFile) => {
if (srcFile.indexOf(postfix) !== -1) {
return srcFile;
}
let extension = commonExtension;
if (!extension) {
extension = fileSystemHelper.getExtension(srcFile);
}
const newFileName = getNewFileName(srcFile, extension, postfix);
fs.renameSync(path.resolve(srcPath, srcFile), path.resolve(srcPath, newFileName));
return newFileName;
}));
};
module.exports = renameIcons;
================================================
FILE: scripts/services/transform-icons.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const path = require('path');
const graphicsMagickHelper = require('../helpers/gm-helper');
const fileSystemHelper = require('../helpers/fs-helper');
class TransformIcons {
constructor(srcFile, srcFilePath, desPath, options) {
this.srcFile = srcFile;
this.srcFilePath = srcFilePath;
this.readableStream = fs.createReadStream(srcFilePath);
this.desPath = desPath;
this.options = options;
fileSystemHelper.mkDirByPathSync(desPath);
}
getAndMakeDesFolder(...desPath) {
const desFolderPath = path.join(...desPath);
fileSystemHelper.mkDirByPathSync(desFolderPath);
return desFolderPath;
}
convert() {
const desFileName = `${fileSystemHelper.trimFileExtension(this.srcFile)}.${this.options.convertTo}`;
const desFilePath = path.join(this.desPath, desFileName);
const writeStream = fs.createWriteStream(desFilePath);
return graphicsMagickHelper.convert(
this.options.convertTo,
this.readableStream,
).stream().pipe(writeStream);
}
resize() {
return this.options.sizes.map((size) => {
const desFolderPath = this.getAndMakeDesFolder(this.desPath, size);
const desFilePath = path.join(desFolderPath, this.srcFile);
const writeStream = fs.createWriteStream(desFilePath);
return graphicsMagickHelper.resize(
size,
this.readableStream
).stream().pipe(writeStream);
});
}
}
module.exports = TransformIcons;
================================================
FILE: scripts/services/transform-png-icons.js
================================================
const fs = require('fs-extra');
const path = require('path');
const fileSystemHelper = require('../helpers/fs-helper');
const graphicsMagickHelper = require('../helpers/gm-helper');
const TransformIcons = require('./transform-icons');
class TransformPngIcons extends TransformIcons {
constructor(...args) {
super(...args);
}
convertAndResizeSvgToPng() {
const desFileName = `${fileSystemHelper.trimFileExtension(this.srcFile)}.${this.options.convertTo}`;
const maxSize = Math.max(...this.options.sizes).toString();
const desFolderPath = this.getAndMakeDesFolder(this.desPath, maxSize);
const desFilePath = path.join(desFolderPath, desFileName);
const writeStream = fs.createWriteStream(desFilePath);
const writableStream = graphicsMagickHelper.convertSvgToPng(
maxSize,
this.options.convertTo,
this.readableStream
).stream().pipe(writeStream);
if (this.options.sizes === 1) {
return ;
}
writableStream.on('finish', () => {
// resize
this.options.sizes.forEach((itemSize) => {
if (itemSize === maxSize) {
return;
}
const desFolderPath = this.getAndMakeDesFolder(this.desPath, itemSize);
const desResizeFilePath = path.join(
desFolderPath,
desFileName,
);
const readableStream = fs.createReadStream(desFilePath);
const writeStream = fs.createWriteStream(desResizeFilePath);
graphicsMagickHelper.resize(
itemSize,
readableStream,
).stream().pipe(writeStream);
});
});
}
}
module.exports = TransformPngIcons;
================================================
FILE: scripts/services/web-font-process-svgs.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const globby = require('globby');
const path = require('path');
const config = require('../config');
const fileSystemHelper = require('../helpers/fs-helper');
const optimizeSvg = require('./oprimize-svg');
const prepareSVGsForFonts = () => {
const srcPath = path.resolve(config.desPath, '**/svg/*.svg');
const destPath = path.join(config.desPath, '/style/icons/svg');
fileSystemHelper.mkDirByPathSync(destPath);
return globby([srcPath])
.then(foundFiles => {
return Promise.all(foundFiles.map((svgFile) => {
const filesName = path.basename(svgFile);
const desSvgPath = path.join(destPath, filesName);
const svg = fs.readFileSync(svgFile);
return optimizeSvg(svg)
.then((processedSvg) => {
fs.writeFileSync(desSvgPath, processedSvg);
});
}));
});
};
module.exports = prepareSVGsForFonts;
================================================
FILE: scripts/services/zip.js
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
const fs = require('fs-extra');
const path = require('path');
const archiver = require('archiver');
const config = require('../config');
const addToDirectory = (srcPath, subDir, zip) => {
zip.directory(srcPath, subDir);
};
const zip = (iconsFolders, archivePath) => {
const zip = archiver('zip', { zlib: { level: 9 } });
const desFolderPath = path.join(config.desPath, `eva-icons.zip`);
zip.on('warning', function(err) {
if (err.code === 'ENOENT') {
console.info('zip warning');
} else {
throw err;
}
});
zip.on('error', function(err) {
throw err;
});
iconsFolders.forEach((folder) => {
const prefix = folder.toLowerCase();
const srcPath = path.join(config.desPath, prefix);
addToDirectory(srcPath, prefix, zip);
});
addToDirectory(archivePath, false, zip);
zip.pipe(fs.createWriteStream(desFolderPath));
console.info(`Build ${desFolderPath}`);
zip.finalize();
};
module.exports = zip;
================================================
FILE: src/app/@core/core.module.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { throwIfAlreadyLoaded } from './module-import-guard';
import { DataModule } from './data/data.module';
const PIPES = [
];
const NB_CORE_PROVIDERS = [
...DataModule.forRoot().providers,
];
@NgModule({
imports: [
CommonModule,
],
exports: [...PIPES],
declarations: [...PIPES],
})
export class CoreModule {
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
ngModule: CoreModule,
providers: [
...NB_CORE_PROVIDERS,
],
};
}
}
================================================
FILE: src/app/@core/data/data.module.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IconService } from './service/icons/icon.service';
import { UrlService } from './service/url.service';
const SERVICES = [
IconService,
UrlService,
];
@NgModule({
imports: [
CommonModule,
],
providers: [
...SERVICES,
],
})
export class DataModule {
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
ngModule: DataModule,
providers: [
...SERVICES,
],
};
}
}
================================================
FILE: src/app/@core/data/service/icons/fill-icons-order.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
export const fillOrder = {
'activity': 0,
'alert-circle': 100,
'alert-triangle': 200,
'archive': 300,
'arrow-circle-down': 400,
'arrow-circle-up': 500,
'arrow-circle-left': 600,
'arrow-circle-right': 700,
'arrow-down': 800,
'arrow-up': 900,
'arrow-left': 1000,
'arrow-right': 1100,
'arrow-downward': 1200,
'arrow-upward': 1300,
'arrow-back': 1400,
'arrow-forward': 1500,
'arrow-ios-downward': 1600,
'arrow-ios-upward': 1700,
'arrow-ios-back': 1800,
'arrow-ios-forward': 1900,
'arrowhead-down': 2000,
'arrowhead-up': 2100,
'arrowhead-left': 2200,
'arrowhead-right': 2300,
'at': 2500,
'attach-2': 2600,
'attach': 2700,
'award': 2800,
'backspace': 2900,
'bar-chart-2': 3000,
'bar-chart': 3100,
'battery': 3200,
'behance': 3250,
'bell-off': 3300,
'bell': 3400,
'bluetooth': 3500,
'book-open': 3600,
'book': 3700,
'bookmark': 3800,
'briefcase': 3900,
'browser': 4000,
'brush': 4100,
'bulb': 4200,
'calendar': 4300,
'camera': 4400,
'car': 4500,
'cast': 4600,
'charging': 4700,
'checkmark-circle-2': 4800,
'checkmark-circle': 4900,
'checkmark-square-2': 5000,
'checkmark-square': 5100,
'checkmark': 5200,
'chevron-down': 5300,
'chevron-left': 5400,
'chevron-right': 5500,
'chevron-up': 5600,
'clipboard': 5700,
'clock': 5800,
'close-circle': 5900,
'close-square': 6000,
'close': 6100,
'cloud-download': 6200,
'cloud-upload': 6300,
'code-download': 6400,
'code': 6500,
'collapse': 6600,
'color-palette': 6700,
'color-picker': 6800,
'compass': 6900,
'copy': 7000,
'corner-down-left': 7100,
'corner-down-right': 7200,
'corner-left-down': 7300,
'corner-left-up': 7400,
'corner-right-down': 7500,
'corner-right-up': 7600,
'corner-up-left': 7700,
'corner-up-right': 7800,
'credit-card': 7900,
'crop': 8000,
'cube': 8100,
'diagonal-arrow-left-down': 8200,
'diagonal-arrow-left-up': 8300,
'diagonal-arrow-right-down': 8400,
'diagonal-arrow-right-up': 8500,
'done-all': 8600,
'download': 8700,
'droplet-off': 8800,
'droplet': 8900,
'edit-2': 9000,
'edit': 9100,
'email': 9200,
'expand': 9300,
'external-link': 9400,
'eye-off-2': 9500,
'eye-off': 9600,
'eye': 9700,
'facebook': 9800,
'file-add': 9900,
'file-remove': 10000,
'file-text': 10100,
'file': 10200,
'film': 10300,
'flag': 10400,
'flash-off': 10500,
'flash': 10600,
'flip': 10650,
'flip-2': 10675,
'folder-add': 10700,
'folder-remove': 10800,
'folder': 10900,
'funnel': 11000,
'gift': 11100,
'github': 11150,
'globe-2': 11200,
'globe-3': 11300,
'globe': 11400,
'google': 11500,
'grid': 11600,
'hard-drive': 11700,
'hash': 11800,
'headphones': 11900,
'heart': 12000,
'home': 12100,
'image-2': 12200,
'image': 12300,
'inbox': 12400,
'info': 12500,
'keypad': 12600,
'layers': 12700,
'layout': 12800,
'link-2': 12900,
'link': 13000,
'linkedin': 13100,
'list': 13200,
'lock': 13300,
'log-in': 13400,
'log-out': 13500,
'map': 13600,
'maximize': 13700,
'menu-2': 13800,
'menu-arrow': 13900,
'menu': 14000,
'message-circle': 14100,
'message-square': 14150,
'mic-off': 14200,
'mic': 14300,
'minimize': 14400,
'minus-circle': 14500,
'minus-square': 14600,
'minus': 14700,
'monitor': 14800,
'moon': 14900,
'more-horizontal': 15000,
'more-vertical': 15100,
'move': 15200,
'music': 15300,
'navigation-2': 15400,
'navigation': 15500,
'npm': 15550,
'options-2': 15600,
'options': 15700,
'pantone': 15800,
'paper-plane': 15900,
'pause-circle': 16000,
'people': 16100,
'percent': 16200,
'person-add': 16300,
'person-delete': 16400,
'person-done': 16500,
'person-remove': 16600,
'person': 16700,
'phone-call': 16800,
'phone-missed': 16900,
'phone-off': 17000,
'phone': 17100,
'pie-chart-2': 17200,
'pie-chart': 17300,
'pin': 17400,
'play-circle': 17500,
'plus-circle': 17600,
'plus-square': 17700,
'plus': 17800,
'power': 17900,
'pricetags': 18000,
'printer': 18100,
'question-mark-circle': 18200,
'question-mark': 18300,
'radio-button-off': 18400,
'radio-button-on': 18500,
'radio': 18600,
'recording': 18700,
'refresh': 18800,
'repeat': 18900,
'rewind-left': 19000,
'rewind-right': 19100,
'save': 19200,
'scissors': 19300,
'search': 19400,
'settings-2': 19500,
'settings': 19600,
'share': 19700,
'shield-off': 19800,
'shield': 19900,
'shopping-bag': 20000,
'shopping-cart': 20100,
'shuffle-2': 20200,
'shuffle': 20300,
'skip-back': 20400,
'skip-forward': 20500,
'slash': 20600,
'smartphone': 20700,
'smiling-face': 20750,
'speaker': 20800,
'square': 20900,
'star': 21000,
'stop-circle': 21100,
'sun': 21200,
'swap': 21300,
'sync': 21400,
'text': 21500,
'thermometer-minus': 21600,
'thermometer-plus': 21700,
'thermometer': 21800,
'toggle-left': 21900,
'toggle-right': 22000,
'trash-2': 22100,
'trash': 22200,
'trending-down': 22300,
'trending-up': 22400,
'tv': 22500,
'twitter': 22600,
'umbrella': 22700,
'undo': 22800,
'unlock': 22900,
'upload': 23000,
'video-off': 23100,
'video': 23200,
'volume-down': 23300,
'volume-mute': 23400,
'volume-off': 23500,
'volume-up': 23600,
'wifi-off': 23700,
'wifi': 23800,
};
================================================
FILE: src/app/@core/data/service/icons/icon.service.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { of as observableOf, Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { icons } from '../../../../../../package-build/eva';
import { fillOrder } from './fill-icons-order';
import { outlineOrder } from './outline-icons-order';
import { iconsTags } from './icons-tags';
class Icon {
name: string;
order: number;
tags: string[];
}
class Icons {
fill: Icon[];
outline: Icon[];
}
export class IconServiceData {
icons: string[];
message: string;
}
@Injectable()
export class IconService {
private icons: Icons;
data: IconServiceData = {
icons: [],
message: '',
};
private sortIcons = (first, second) => first.order - second.order;
private orders = {
fill: fillOrder,
outline: outlineOrder,
};
constructor() {
this.icons = Object.keys(icons)
.reduce((result, item, index, iconsArray): Icons => {
const itemType = item.indexOf('outline') === -1 ? 'fill' : 'outline';
const iconData = this.getIconData(item, itemType);
result[itemType] = result[itemType].concat(iconData);
// sort items in last iteration
if (index === iconsArray.length - 1) {
result['outline'].sort(this.sortIcons);
result['fill'].sort(this.sortIcons);
}
return result;
}, { fill: [], outline: [] });
}
getIconData(icoName: string, iconType: string): Icon {
const groupTagName = icoName.replace('-outline', '');
const tags = this.getIconsTags(groupTagName, icoName);
return {
name: icoName,
order: this.orders[iconType][icoName],
tags,
};
}
getIconsTags(groupName: string, icoName: string): string[] {
return iconsTags[groupName] && iconsTags[groupName].length > 0 ?
iconsTags[groupName].concat(icoName) :
[icoName];
}
getIconsData(type: string): Observable<IconServiceData> {
this.data.icons = this.icons[type];
return observableOf(this.data);
}
getFilteredIconsData(searchKey: string, type: string): Observable<IconServiceData> {
const foundIcons = this.icons[type].filter((item) => {
return item.tags.some((tag) => tag.indexOf(searchKey.toLowerCase()) !== -1);
});
this.data.icons = foundIcons;
this.data.message = foundIcons.length === 0 ? 'Oops… here are no results that match your search.' : '';
return observableOf(this.data);
}
}
================================================
FILE: src/app/@core/data/service/icons/icons-tags.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
export const iconsTags = {
'activity': ['pulse', 'health', 'action', 'motion'],
'alert-circle': ['warning'],
'alert-triangle': ['warning'],
'archive': ['document', 'file'],
'arrow-circle-down': [],
'arrow-circle-up': [],
'arrow-circle-left': [],
'arrow-circle-right': [],
'arrow-down': [],
'arrow-up': [],
'arrow-left': [],
'arrow-right': [],
'arrow-downward': [],
'arrow-upward': [],
'arrow-back': [],
'arrow-forward': [],
'arrow-ios-downward': [],
'arrow-ios-upward': [],
'arrow-ios-back': [],
'arrow-ios-forward': [],
'arrowhead-down': [],
'arrowhead-up': [],
'arrowhead-left': [],
'arrowhead-right': [],
'at': ['mention'],
'attach-2': ['paperclip, attachment'],
'attach': ['paperclip, attachment'],
'award': ['achievement', 'badge'],
'backspace': ['cross'],
'bar-chart-2': [],
'bar-chart': [],
'battery': [],
'bell-off': ['alarm', 'notification', 'silent'],
'bell': ['alarm', 'notification'],
'bluetooth': ['wireless'],
'book-open': ['read'],
'book': ['read', 'dictionary', 'booklet', 'magazine'],
'bookmark': ['read', 'clip', 'marker', 'tag'],
'briefcase': ['work', 'bag', 'baggage', 'folder'],
'browser': ['web'],
'brush': ['art'],
'bulb': ['lamp', 'light'],
'calendar': [],
'camera': ['photo'],
'car': ['machine', 'truck', 'auto'],
'cast': [],
'charging': [],
'checkmark-circle-2': [],
'checkmark-circle': [],
'checkmark-square-2': [],
'checkmark-square': [],
'checkmark': [],
'chevron-down': ['arrow'],
'chevron-left': ['arrow'],
'chevron-right': ['arrow'],
'chevron-up': ['arrow'],
'clipboard': ['copy'],
'clock': ['time', 'watch', 'alarm'],
'close-circle': ['cross'],
'close-square': ['cross'],
'close': ['cross'],
'cloud-download': ['arrow'],
'cloud-upload': ['arrow'],
'code-download': ['chevron', 'arrow'],
'code': ['chevron', 'arrow'],
'collapse': ['arrow'],
'color-palette': ['art'],
'color-picker': ['art'],
'compass': ['navigation', 'safari', 'travel'],
'copy': ['clone', 'duplicate'],
'corner-down-left': ['arrow'],
'corner-down-right': ['arrow'],
'corner-left-down': ['arrow'],
'corner-left-up': ['arrow'],
'corner-right-down': ['arrow'],
'corner-right-up': ['arrow'],
'corner-up-left': ['arrow'],
'corner-up-right': ['arrow'],
'credit-card': ['purchase', 'payment', 'cc'],
'crop': ['photo', 'image'],
'cube': ['figure'],
'diagonal-arrow-left-down': [],
'diagonal-arrow-left-up': [],
'diagonal-arrow-right-down': [],
'diagonal-arrow-right-up': [],
'done-all': ['checkmark'],
'download': ['arrow'],
'droplet-off': ['water'],
'droplet': ['water'],
'edit-2': ['pencil', 'change'],
'edit': ['pencil', 'change'],
'email': ['letter'],
'expand': ['arrows'],
'external-link': ['arrow'],
'eye-off-2': ['view', 'watch'],
'eye-off': ['view', 'watch'],
'eye': ['view', 'watch'],
'facebook': ['logo'],
'file-add': [],
'file-remove': [],
'file-text': [],
'file': [],
'film': ['movie', 'video'],
'flag': [],
'flash-off': [],
'flash': ['electricity'],
'folder-add': ['directory'],
'folder-remove': ['directory'],
'folder': ['directory'],
'funnel': ['filter'],
'gift': ['present', 'box', 'birthday', 'party'],
'github': ['logo'],
'globe-2': ['world', 'browser', 'language', 'translate'],
'globe-3': ['world', 'browser', 'language', 'translate'],
'globe': ['world', 'browser', 'language', 'translate'],
'google': ['world', 'browser', 'language', 'translate', 'logo'],
'grid': [],
'hard-drive': ['computer', 'server'],
'hash': ['hashtag', 'number', 'pound'],
'headphones': ['music', 'audio'],
'heart': ['like', 'love'],
'home': ['house'],
'image-2': ['picture'],
'image': ['picture'],
'inbox': ['email', 'letter'],
'info': [],
'keypad': [],
'layers': [],
'layout': [],
'link-2': [],
'link': [],
'linkedin': ['logo', 'social'],
'list': [],
'lock': [],
'log-in': ['sign in', 'arrow'],
'log-out': ['sign out', 'arrow'],
'loader': [],
'map': ['location', 'navigation', 'travel'],
'maximize': ['fullscreen'],
'menu-2': ['bars', 'navigation', 'hamburger'],
'menu-arrow': ['bars', 'navigation', 'hamburger'],
'menu': ['bars', 'navigation', 'hamburger'],
'message-circle': ['comment', 'chat'],
'message-square': ['comment', 'chat'],
'mic-off': ['record'],
'mic': ['record'],
'minimize': ['exit fullscreen'],
'minus-circle': [],
'minus-square': [],
'minus': [],
'monitor': ['tv'],
'moon': ['dark', 'night'],
'more-horizontal': ['ellipsis'],
'more-vertical': ['ellipsis'],
'move': ['arrows'],
'music': ['melody', 'song'],
'navigation-2': ['location', 'travel'],
'navigation': ['location', 'travel'],
'npm': ['logo'],
'options-2': [],
'options': [],
'pantone': ['color'],
'paper-plane': ['flight'],
'pause-circle': ['music', 'stop'],
'people': ['person', 'user'],
'percent': [],
'person-add': ['user'],
'person-delete': ['user'],
'person-done': ['user'],
'person-remove': ['user'],
'person': ['user'],
'phone-call': [],
'phone-missed': [],
'phone-off': [],
'phone': [],
'pie-chart-2': [],
'pie-chart': [],
'pin': ['mark'],
'play-circle': ['music', 'start'],
'plus-circle': ['add', 'new'],
'plus-square': ['add', 'new'],
'plus': ['add', 'new'],
'power': ['on', 'off'],
'pricetags': ['commerce'],
'printer': [],
'question-mark-circle': ['help'],
'question-mark': ['help'],
'radio-button-off': ['signal'],
'radio-button-on': ['signal'],
'radio': ['signal'],
'recording': [],
'refresh': [],
'repeat': ['music'],
'rewind-left': ['music'],
'rewind-right': ['music'],
'save': ['floppy disk'],
'scissors': ['tool'],
'search': ['magnifier'],
'settings-2': ['cog', 'edit', 'gear', 'preferences'],
'settings': ['cog', 'edit', 'gear', 'preferences'],
'share': [],
'shield-off': ['security'],
'shield': ['security'],
'shopping-bag': ['ecommerce', 'cart', 'purchase', 'store'],
'shopping-cart': ['ecommerce', 'cart', 'purchase', 'store'],
'shuffle-2': ['music'],
'shuffle': ['music'],
'skip-back': ['music'],
'skip-forward': ['music'],
'slash': ['ban', 'no'],
'smartphone': ['mobile'],
'smiling-face': ['smiling', 'face', 'stickers', 'memes'],
'speaker': ['music'],
'square': ['figure'],
'star': ['bookmark', 'favorite', 'like'],
'stop-circle': [],
'sun': ['brightness', 'weather', 'light'],
'swap': ['arrow'],
'sync': ['arrow'],
'text': [],
'thermometer-minus': ['temperature'],
'thermometer-plus': ['temperature'],
'thermometer': ['temperature'],
'toggle-left': ['on', 'off', 'switch'],
'toggle-right': ['on', 'off', 'switch'],
'trash-2': ['garbage', 'delete', 'remove'],
'trash': ['garbage', 'delete', 'remove'],
'trending-down': ['arrow'],
'trending-up': ['arrow'],
'tv': ['monitor'],
'twitter': ['logo'],
'umbrella': ['rain', 'weather'],
'undo': ['arrow'],
'unlock': [],
'upload': ['arrow'],
'video-off': ['camera', 'movie', 'film'],
'video': ['camera', 'movie', 'film'],
'volume-down': ['music', 'sound', 'mute'],
'volume-mute': ['music', 'sound', 'mute'],
'volume-off': ['music', 'sound', 'mute'],
'volume-up': ['music', 'sound', 'mute'],
'wifi-off': ['internet', 'connection'],
'wifi': ['internet', 'connection'],
};
================================================
FILE: src/app/@core/data/service/icons/outline-icons-order.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
export const outlineOrder = {
'activity-outline': 0,
'alert-circle-outline': 100,
'alert-triangle-outline': 200,
'archive-outline': 300,
'arrow-circle-down-outline': 400,
'arrow-circle-up-outline': 500,
'arrow-circle-left-outline': 600,
'arrow-circle-right-outline': 700,
'arrow-down-outline': 800,
'arrow-up-outline': 900,
'arrow-left-outline': 1000,
'arrow-right-outline': 1100,
'arrow-downward-outline': 1200,
'arrow-upward-outline': 1300,
'arrow-back-outline': 1400,
'arrow-forward-outline': 1500,
'arrow-ios-downward-outline': 1600,
'arrow-ios-upward-outline': 1700,
'arrow-ios-back-outline': 1800,
'arrow-ios-forward-outline': 1900,
'arrowhead-down-outline': 2000,
'arrowhead-up-outline': 2100,
'arrowhead-left-outline': 2200,
'arrowhead-right-outline': 2300,
'at-outline': 2400,
'attach-2-outline': 2500,
'attach-outline': 2600,
'award-outline': 2700,
'backspace-outline': 2800,
'bar-chart-2-outline': 2900,
'bar-chart-outline': 3000,
'battery-outline': 3100,
'behance-outline': 3150,
'bell-off-outline': 3200,
'bell-outline': 3300,
'bluetooth-outline': 3400,
'book-open-outline': 3500,
'book-outline': 3600,
'bookmark-outline': 3700,
'briefcase-outline': 3800,
'browser-outline': 3900,
'brush-outline': 4000,
'bulb-outline': 4100,
'calendar-outline': 4200,
'camera-outline': 4300,
'car-outline': 4400,
'cast-outline': 4500,
'charging-outline': 4600,
'checkmark-circle-2-outline': 4700,
'checkmark-circle-outline': 4800,
'checkmark-outline': 4900,
'checkmark-square-2-outline': 5000,
'checkmark-square-outline': 5100,
'chevron-down-outline': 5200,
'chevron-left-outline': 5300,
'chevron-right-outline': 5400,
'chevron-up-outline': 5500,
'clipboard-outline': 5600,
'clock-outline': 5700,
'close-circle-outline': 5800,
'close-outline': 5900,
'close-square-outline': 6000,
'cloud-download-outline': 6100,
'cloud-upload-outline': 6200,
'code-download-outline': 6300,
'code-outline': 6400,
'collapse-outline': 6500,
'color-palette-outline': 6600,
'color-picker-outline': 6700,
'compass-outline': 6800,
'copy-outline': 6900,
'corner-down-left-outline': 7000,
'corner-down-right-outline': 7100,
'corner-left-down-outline': 7200,
'corner-left-up-outline': 7300,
'corner-right-down-outline': 7400,
'corner-right-up-outline': 7500,
'corner-up-left-outline': 7600,
'corner-up-right-outline': 7700,
'credit-card-outline': 7800,
'crop-outline': 7900,
'cube-outline': 8000,
'diagonal-arrow-left-down-outline': 8100,
'diagonal-arrow-left-up-outline': 8200,
'diagonal-arrow-right-down-outline': 8300,
'diagonal-arrow-right-up-outline': 8400,
'done-all-outline': 8500,
'download-outline': 8600,
'droplet-off-outline': 8700,
'droplet-outline': 8800,
'edit-2-outline': 8900,
'edit-outline': 9000,
'email-outline': 9100,
'expand-outline': 9200,
'external-link-outline': 9300,
'eye-off-2-outline': 9400,
'eye-off-outline': 9500,
'eye-outline': 9600,
'facebook-outline': 9700,
'file-add-outline': 9800,
'file-outline': 9900,
'file-remove-outline': 10000,
'file-text-outline': 10100,
'film-outline': 10200,
'flag-outline': 10300,
'flash-off-outline': 10400,
'flash-outline': 10500,
'flip-outline': 10550,
'flip-2-outline': 10575,
'folder-add-outline': 10600,
'folder-outline': 10700,
'folder-remove-outline': 10800,
'funnel-outline': 10900,
'gift-outline': 11000,
'globe-2-outline': 11100,
'globe-outline': 11200,
'google-outline': 11300,
'grid-outline': 11400,
'hard-drive-outline': 11500,
'hash-outline': 11600,
'headphones-outline': 11700,
'heart-outline': 11800,
'home-outline': 11900,
'image-outline': 12000,
'inbox-outline': 12100,
'info-outline': 12200,
'keypad-outline': 12300,
'layers-outline': 12400,
'layout-outline': 12500,
'link-2-outline': 12600,
'link-outline': 12700,
'linkedin-outline': 12800,
'list-outline': 12900,
'loader-outline': 13000,
'lock-outline': 13100,
'log-in-outline': 13200,
'log-out-outline': 13300,
'map-outline': 13400,
'maximize-outline': 13500,
'menu-2-outline': 13600,
'menu-arrow-outline': 13700,
'menu-outline': 13800,
'message-circle-outline': 13900,
'message-square-outline': 14000,
'mic-off-outline': 14100,
'mic-outline': 14200,
'minimize-outline': 14300,
'minus-circle-outline': 14400,
'minus-outline': 14500,
'minus-square-outline': 14600,
'monitor-outline': 14700,
'moon-outline': 14800,
'more-horizontal-outline': 14900,
'more-vertical-outline': 15000,
'move-outline': 15100,
'music-outline': 15200,
'navigation-2-outline': 15300,
'navigation-outline': 15400,
'npm-outline': 15450,
'options-2-outline': 15500,
'options-outline': 15600,
'pantone-outline': 15700,
'paper-plane-outline': 15800,
'pause-circle-outline': 15900,
'people-outline': 16000,
'percent-outline': 16100,
'person-add-outline': 16200,
'person-delete-outline': 16300,
'person-done-outline': 16400,
'person-outline': 16500,
'person-remove-outline': 16600,
'phone-call-outline': 16700,
'phone-missed-outline': 16800,
'phone-off-outline': 16900,
'phone-outline': 17000,
'pie-chart-outline': 17100,
'pin-outline': 17200,
'play-circle-outline': 17300,
'plus-circle-outline': 17400,
'plus-outline': 17500,
'plus-square-outline': 17600,
'power-outline': 17700,
'pricetags-outline': 17800,
'printer-outline': 17900,
'question-mark-circle-outline': 18000,
'question-mark-outline': 18100,
'radio-button-off-outline': 18200,
'radio-button-on-outline': 18300,
'radio-outline': 18400,
'recording-outline': 18500,
'refresh-outline': 18600,
'repeat-outline': 18700,
'rewind-left-outline': 18800,
'rewind-right-outline': 18900,
'save-outline': 19000,
'scissors-outline': 19100,
'search-outline': 19200,
'settings-2-outline': 19300,
'settings-outline': 19400,
'share-outline': 19500,
'shake-outline': 19550,
'shield-off-outline': 19600,
'shield-outline': 19700,
'shopping-bag-outline': 19800,
'shopping-cart-outline': 19900,
'shuffle-2-outline': 20000,
'shuffle-outline': 20100,
'skip-back-outline': 20200,
'skip-forward-outline': 20300,
'slash-outline': 20400,
'smartphone-outline': 20500,
'smiling-face-outline': 20550,
'speaker-outline': 20600,
'square-outline': 20700,
'star-outline': 20800,
'stop-circle-outline': 20900,
'sun-outline': 21000,
'swap-outline': 21100,
'sync-outline': 21200,
'text-outline': 21300,
'thermometer-minus-outline': 21400,
'thermometer-outline': 21500,
'thermometer-plus-outline': 21600,
'toggle-left-outline': 21700,
'toggle-right-outline': 21800,
'trash-2-outline': 21900,
'trash-outline': 22000,
'trending-down-outline': 22100,
'trending-up-outline': 22200,
'tv-outline': 22300,
'twitter-outline': 22400,
'umbrella-outline': 22500,
'undo-outline': 22600,
'unlock-outline': 22700,
'upload-outline': 22800,
'video-off-outline': 22900,
'video-outline': 23000,
'volume-down-outline': 23100,
'volume-mute-outline': 23200,
'volume-off-outline': 23300,
'volume-up-outline': 23400,
'wifi-off-outline': 23500,
'wifi-outline': 23600,
};
================================================
FILE: src/app/@core/data/service/url.service.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Injectable } from '@angular/core';
import { environment } from '../../../../environments/environment';
@Injectable()
export class UrlService {
private prefix_folder = 'package-build';
readonly DOWNLOAD_PROD_ZIP_URL = 'eva-icons.zip';
readonly DOWNLOAD_ZIP_URL = `${this.prefix_folder}/eva-icons.zip`;
readonly DOWNLOAD_URLS = {
svg: `${this.prefix_folder}/type/svg/name.svg`,
png: `${this.prefix_folder}/type/png/128/name.png`,
};
readonly DOWNLOAD_PROD_URLS = {
svg: 'type/svg/name.svg',
png: 'type/png/128/name.png',
};
protected downloadItemsData = [
{
format: 'svg',
title: 'SVG',
href: this.getDownloadItemUrl('svg'),
},
{
format: 'png',
title: 'PNG',
href: this.getDownloadItemUrl('png'),
},
];
getDownloadItemUrl(format) {
return environment.production ?
this.DOWNLOAD_PROD_URLS[format] :
this.DOWNLOAD_URLS[format];
}
getZippedIconsUrl() {
return environment.production ?
this.DOWNLOAD_PROD_ZIP_URL :
this.DOWNLOAD_ZIP_URL;
}
getDownloadItemsDate(type, name) {
const matches = {
type,
name,
};
return this.downloadItemsData.map((item) => {
return {
...item,
href: this.getIconHref(item.href, matches),
};
});
}
private getIconHref(href, matches) {
return href.replace(/type|name/gi, (matched) => {
return matches[matched];
});
}
}
================================================
FILE: src/app/@core/module-import-guard.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
if (parentModule) {
throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
}
}
================================================
FILE: src/app/@theme/components/animation-switcher/animation-switcher.component.html
================================================
<ul>
<li *ngFor="let item of animationItems"
class="nav-item eva-parent-hover"
[class.active]="item.animationType === animation"
(click)="changeAnimationType(item.animationType)">
<i class="nav-menu-icon"
[innerHTML]="item.iconName | eva: { animationType: item.animationType }">
</i>
<span class="title">{{ item.title }}</span>
</li>
</ul>
================================================
FILE: src/app/@theme/components/animation-switcher/animation-switcher.component.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$primary: nb-theme(color-primary);
$item-color: #a7b4cc;
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
cursor: pointer;
align-items: baseline;
font-size: nb-theme(font-size-sm);
color: $item-color;
&:not(:first-child) {
margin-left: 1.75rem;
}
&:hover, &.active, &:focus {
color: $primary;
text-shadow: 0.5px 0 0 currentColor;
font-weight: normal;
outline: none!important;
.nav-menu-icon {
fill: $primary;
}
}
.nav-menu-icon {
margin-right: 0.5rem;
fill: $item-color;
}
span {
font-size: nb-theme(font-size-sm);
}
}
@include media-breakpoint-down(lg) {
a {
padding: 0.5rem 0.75rem;
&.active {
border-radius: nb-theme(menu-submenu-item-border-radius);
border: 1px solid $primary;
}
.nav-menu-icon {
margin: 0 0.25rem;
}
&::after {
display: none;
}
span {
display: none;
}
}
.nav-menu-icon {
margin: 0;
}
}
@include media-breakpoint-down(sm) {
.title {
display: none;
}
}
}
================================================
FILE: src/app/@theme/components/animation-switcher/animation-switcher.component.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'eva-animation-switcher',
templateUrl: './animation-switcher.component.html',
styleUrls: ['./animation-switcher.component.scss'],
})
export class AnimationSwitcherComponent implements OnInit {
@Output() changeAnimation: EventEmitter<string> = new EventEmitter();
@Input() animation: string;
@Input() isMobileView: string;
selectedItem: string;
ngOnInit() {
this.selectedItem = this.animation;
}
animationItems = [
{
title: 'Zoom',
iconName: 'maximize-outline',
animationType: 'zoom',
},
{
title: 'Pulse',
iconName: 'activity-outline',
animationType: 'pulse',
},
{
title: 'Shake',
iconName: 'shake-outline',
animationType: 'shake',
},
{
title: 'Flip in Y',
iconName: 'flip-2-outline',
animationType: 'flip',
},
];
changeAnimationType(value) {
this.changeAnimation.emit(value);
this.animation = value;
}
}
================================================
FILE: src/app/@theme/components/footer/footer.component.html
================================================
<div class="logo">
<a href="https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=banner&utm_content=footer_logo" target="_blank">
<img src="assets/img/akveo-logo.png">
</a>
</div>
<div class="company-info">
<ul>
<li class="title">More from Akveo</li>
<li><a href="https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=home_footer_homepage" target="_blank">Homepage</a></li>
<li><a href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=footer_link_nebular" target="_blank">Nebular</a></li>
<li><a href="https://akveo.github.io/ngx-admin?utm_campaign=ngx_admin%20-%20home%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=footer_link_ngx_admin" target="_blank">ngx-admin</a></li>
<li>
<a href="https://eva.design?utm_campaign=eva_design%20-%20home%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=footer_link_eva" target="_blank">
Eva Design System
</a>
</li>
</ul>
</div>
<div class="social-container">
<ul>
<li class="title">Follow Us</li>
<li class="social">
<a href="https://github.com/akveo/eva-icons" target="_blank">
<i [innerHTML]="'github-outline' | eva: { width: 30, height: 30, fill: '#f7f8fa' }"></i>
</a>
<a href="https://twitter.com/akveo_inc" target="_blank">
<i [innerHTML]="'twitter' | eva: { width: 30, height: 30, fill: '#f7f8fa' }"></i>
</a>
<a href="https://www.facebook.com/akveo" target="_blank">
<i [innerHTML]="'facebook' | eva: { width: 35, height: 35, fill: '#f7f8fa' }"></i>
</a>
<a href="https://www.linkedin.com/company/akveo" target="_blank">
<i [innerHTML]="'linkedin' | eva: { width: 35, height: 35, fill: '#f7f8fa' }"></i>
</a>
</li>
<li class="copy">
© 2015-2018 <a href="https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=footer_akveo_llc" target="_blank">Akveo LLC</a><br>
Documentation licensed under CC BY 4.0.
</li>
</ul>
</div>
<div class="contact">
<ul>
<li class="title">Contact Us</li>
<li><a href="mailto:contact@akveo.com">contact@akveo.com</a></li>
</ul>
</div>
================================================
FILE: src/app/@theme/components/footer/footer.component.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$text-fg: nb-theme(footer-fg);
$social-fg: nb-theme(color-fg-icon);
$title-fg: nb-theme(color-fg);
font-weight: nb-theme(font-weight-bold);
display: flex;
flex: 1;
flex-wrap: wrap;
padding-top: 2.75rem;
justify-content: flex-start;
> div {
display: flex;
margin-right: 0;
margin-bottom: 2rem;
justify-content: center;
width: 100%;
&:last-child {
margin-right: 0;
margin-bottom: 0;
}
a {
font-size: nb-theme(font-size-sm);
color: $text-fg;
}
ul {
list-style: none;
padding-left: 0;
}
li {
display: flex;
margin-bottom: 1.5rem;
justify-content: center;
align-items: center;
text-align: center;
&:first-child {
margin-bottom: 1.75rem;
}
}
.title {
color: $title-fg;
}
.copy {
$copy-color: #535b6c;
color: $copy-color;
display: list-item;
font-size: 0.66rem;
line-height: 1.75;
a {
font-size: 0.65rem;
color: $copy-color;
}
}
.social {
display: flex;
flex-direction: row;
a {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
background-color: $social-fg;
border-radius: 6px;
text-decoration: none;
margin-right: 1rem;
line-height: 0.5;
&:last-child {
margin-right: 0;
}
}
}
}
> div.logo {
margin-bottom: 3.125rem;
a {
width: 5.5rem;
height: 5.5rem;
}
img {
width: 100%;
height: 100%;
}
}
@include media-breakpoint-up(md) {
> div.logo {
display: none;
}
> div {
justify-content: flex-start;
margin-right: 1.5rem;
margin-bottom: 0;
width: auto;
li {
justify-content: flex-start;
align-items: flex-start;
text-align: left;
}
}
.company-info {
margin-right: 12.25rem;
}
.social-container {
margin-right: 8.375rem;
}
}
@include media-breakpoint-up(lg) {
> div.logo {
display: flex;
flex-direction: column;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
}
@include media-breakpoint-down(md) {
padding-left: 1rem;
padding-right: 1rem;
}
}
================================================
FILE: src/app/@theme/components/footer/footer.component.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component } from '@angular/core';
@Component({
selector: 'eva-footer',
styleUrls: ['./footer.component.scss'],
templateUrl: './footer.component.html',
})
export class FooterComponent {
}
================================================
FILE: src/app/@theme/components/header/header.component.html
================================================
<div class="section left">
<iframe class="stars mobile"
src="https://ghbtns.com/github-btn.html?user=akveo&repo=eva-icons&type=star&count=true"
frameborder="0"
scrolling="0">
</iframe>
<span class="desktop">Support us on:</span>
<div class="social-group">
<a href="https://twitter.com/akveo_inc" target="_blank" class="social twitter">
<i [innerHTML]="'twitter-outline' | eva: { width: '100%', height: '100%' }"></i>
<span>Twitter</span>
</a>
<a href="https://www.behance.net/gallery/72027793/Eva-Icons" target="_blank" class="social behance">
<i [innerHTML]="'behance-outline' | eva: { width: '100%', height: '100%' }"></i>
<span>Behance</span>
</a>
<a href="https://github.com/akveo/eva-icons" target="_blank" class="social github">
<i [innerHTML]="'github-outline' | eva: { width: '100%', height: '100%' }"></i>
<span>GitHub</span>
</a>
</div>
</div>
<div class="section right">
<div class="social-group mobile">
<a href="https://twitter.com/akveo_inc" target="_blank" class="social twitter">
<i [innerHTML]="'twitter-outline' | eva: { width: '100%', height: '100%' }"></i>
<span>Twitter</span>
</a>
<a href="https://www.behance.net/gallery/72027793/Eva-Icons" target="_blank" class="social behance">
<i [innerHTML]="'behance-outline' | eva: { width: '100%', height: '100%' }"></i>
<span>Behance</span>
</a>
<a href="https://github.com/akveo/eva-icons" target="_blank" class="social github">
<i [innerHTML]="'github' | eva: { width: '100%', height: '100%' }"></i>
<span>GitHub</span>
</a>
</div>
<iframe class="stars desktop"
src="https://ghbtns.com/github-btn.html?user=akveo&repo=eva-icons&type=star&count=true"
frameborder="0"
scrolling="0">
</iframe>
<div class="btn btn-primary btn-download btn-header">
<i [innerHTML]="'download' | eva: { width: 24, height: 24 }"></i>
<span>Download</span>
<div class="download-items-container">
<ul>
<li (click)="clickOnDownloadPack()">
<a href="{{ zipUrl }}"
download>
<i [innerHTML]="'cube-outline' | eva: { width: 24, height: 24, fill: '#ffffff' }"></i>
<span>Design Pack</span>
</a>
</li>
<li>
<a href="https://www.npmjs.com/package/eva-icons" target="_blank">
<i [innerHTML]="'npm' | eva: { width: 24, height: 24, fill: '#ffffff' }"></i>
<span>NPM</span>
</a>
</li>
</ul>
</div>
</div>
</div>
================================================
FILE: src/app/@theme/components/header/header.component.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$right-section-width: nb-theme(settings-col-width);
$logo-fg: nb-theme(header-fg);
$version-fg: nb-theme(color-primary);
$primary: nb-theme(color-primary);
$social-color: #a7b4cc;
$social-hover: #eef3ff;
$social-active: #d4dbf9;
display: flex;
flex: 1 0 auto;
flex-direction: row;
align-items: center;
margin: 0;
justify-content: space-between;
.section {
display: flex;
&.left {
display: flex;
margin-top: 1.5rem;
color: $social-color;
}
&.right {
align-items: center;
}
}
.stars {
width: 95px;
height: 20px;
margin-right: 1.5rem;
margin-top: 1.625rem;
}
.social-group {
display: flex;
align-items: center;
margin-left: 2.25rem;
i {
width: 1.5rem;
height: 1.5rem;
}
a {
display: flex;
align-items: center;
color: $social-color;
text-transform: none;
text-decoration: none;
margin-left: 1.75rem;
margin-top: 0;
&:first-child {
margin-left: 0;
i {
line-height: inherit;
}
}
i {
fill: $social-color;
line-height: 0.5;
}
&:hover {
i {
fill: $primary;
}
color: $primary;
}
}
span {
margin-left: 0.5rem;
}
}
.btn-header {
display: flex;
align-items: center;
margin-top: 1.5rem;
color: $primary;
background-color: transparent;
font-weight: nb-theme(font-weight-bold);
padding: 0.875rem;
border: 1px solid nb-theme(color-gray-bg);
border-radius: 0.25rem;
cursor: pointer;
}
.btn-download {
position: relative;
.download-items-container {
display: none;
}
span {
padding: 0 0.75rem;
}
i {
fill: $primary;
}
&:hover {
color: nb-theme(color-white);
box-shadow: none;
background-color: $primary;
i {
fill: nb-theme(color-white);
}
.download-items-container {
display: block;
padding-top: 0.625rem;
position: absolute;
z-index: 1;
top: 100%;
left: 0;
}
ul {
margin: 0;
padding: 0.625rem 0;
background-color: $primary;
box-shadow: 0 6px 10px 0 rgba(51, 102, 255, 0.16);
border-radius: 0.25rem;
li {
list-style: none;
a {
display: flex;
align-items: center;
text-decoration: none;
text-transform: none;
padding: 1rem;
color: nb-theme(color-white);
&:hover {
background-color: #598bff;
}
&.active, &:active {
background-color: #284de0;
}
}
}
}
}
}
.desktop {
display: inherit;
}
.mobile {
display: none;
}
@include media-breakpoint-up(sm) {
.logo {
align-items: baseline;
flex: 1 0 auto;
}
}
@include media-breakpoint-down(xl) {
margin: 0 1rem;
}
@include media-breakpoint-down(md) {
.social-group {
span {
display: none;
}
}
}
@include media-breakpoint-down(sm) {
.desktop {
display: none;
}
.mobile {
display: inherit;
}
.stars {
margin-top: 0.875rem;
margin-right: 0;
}
.section {
margin-top: 1rem;
&.left {
margin-top: 0;
a {
display: none;
}
}
&.right {
.social-group {
margin-right: 0;
margin-left: 0;
a {
margin-left: 0;
padding: 0.625rem;
}
i {
width: 2rem;
height: 2rem;
}
span {
display: none;
}
.github, .behance {
i {
width: 1.75rem;
height: 1.75rem;
}
}
}
}
}
.btn-header {
margin-left: 0;
}
.btn-download {
display: none;
}
}
@media (min-width: 315px) and (max-width: 370px) {
.section {
&.right {
.social-group {
a {
margin-left: 0.5rem;
padding: 0.5rem;
}
}
}
}
}
}
================================================
FILE: src/app/@theme/components/header/header.component.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component } from '@angular/core';
import { UrlService } from '../../../@core/data/service/url.service';
import { EvaAnalytics } from '../../services/analytics.service';
import { EvaVersionService } from '../../services/version.service';
@Component({
selector: 'eva-header',
styleUrls: ['./header.component.scss'],
templateUrl: './header.component.html',
})
export class HeaderComponent {
zipUrl: string;
constructor(private urlService: UrlService,
private analytics: EvaAnalytics,
private versionService: EvaVersionService) {
this.zipUrl = this.urlService.getZippedIconsUrl();
}
clickOnDownloadPack() {
const version = this.versionService.getEvoVersion();
this.analytics.trackEvent('downloadPack', `download pack version: ${version}`);
}
}
================================================
FILE: src/app/@theme/components/icon-list/icon-list.component.html
================================================
<nb-card *ngFor="let icon of icons; trackBy: trackByFn"
(click)="clickIconHandler(icon.name)">
<nb-card-body *ngIf="isMobileView; else desktop"
class="eva-parent-hover"
[nbPopover]="icon.name">
<i [innerHTML]="icon.name | eva: { width: '100%', height: '100%', animationType: animationType }"></i>
</nb-card-body>
<ng-template #desktop>
<nb-card-body class="eva-parent-hover"
[nbPopover]="icon.name"
[nbPopoverMode]="'hint'">
<i [innerHTML]="icon.name | eva: { width: '100%', height: '100%', animationType: animationType }"></i>
</nb-card-body>
</ng-template>
</nb-card>
<nb-card class="fake-card"></nb-card>
<nb-card class="fake-card"></nb-card>
================================================
FILE: src/app/@theme/components/icon-list/icon-list.component.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$body-size: 6rem;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
nb-card {
cursor: pointer;
border: none;
margin-bottom: 3rem;
margin-right: calc((100% - 8 * #{$body-size}) / 7);
&:nth-child(8n) {
margin-right: 0;
}
}
nb-card-body {
width: $body-size;
height: $body-size;
line-height: 3.25;
text-align: center;
border: 1px solid #f6f7fa;
border-radius: 0.25rem;
i {
fill: #5670a1;
display: inline-block;
width: 1.625rem;
height: 1.625rem;
}
&:hover {
border: 1px solid transparent;
box-shadow: 0 8px 24px 0 rgba(237, 240, 245, 0.5);
i {
fill: nb-theme(color-primary);
}
}
}
.fake-card {
visibility: hidden;
margin: 0;
padding: 0;
height: 0;
nb-card-body {
display: none;
}
}
@include media-breakpoint-down(md) {
$body-size: 7rem;
nb-card {
margin-right: calc((100% - 4 * #{$body-size}) / 3);
&:nth-child(4n) {
margin-right: 0;
}
}
nb-card-body {
width: $body-size;
height: $body-size;
line-height: 4.25;
}
}
@include media-breakpoint-down(is) {
$body-size: 4.625rem;
nb-card {
margin-bottom: 2.5rem;
margin-right: calc((100% - 4 * #{$body-size}) / 3);
}
nb-card-body {
width: $body-size;
height: $body-size;
line-height: 2;
i {
width: 1.5rem;
height: 1.5rem;
}
}
}
@media (min-width: 315px) and (max-width: 370px) {
$body-size: 4rem;
nb-card {
margin-bottom: 2.5rem;
margin-right: calc((100% - 4 * #{$body-size}) / 3);
}
nb-card-body {
width: $body-size;
height: $body-size;
padding: 1rem;
line-height: 1.8;
i {
width: 1.5rem;
height: 1.5rem;
}
}
}
}
================================================
FILE: src/app/@theme/components/icon-list/icon-list.component.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnDestroy,
Output,
ViewChildren,
} from '@angular/core';
import { takeWhile } from 'rxjs/operators';
import { NbLayoutScrollService, NbPopoverDirective } from '@nebular/theme';
@Component({
selector: 'eva-icon-list',
templateUrl: './icon-list.component.html',
styleUrls: ['./icon-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconListComponent implements OnDestroy {
private alive = true;
@ViewChildren(NbPopoverDirective) popovers: NbPopoverDirective[];
@Input() icons: { name: string; order: number; }[];
@Input() isMobileView: boolean = false;
@Input() animationType: string;
@Output() clickIcon: EventEmitter<string> = new EventEmitter();
constructor(private scrollService: NbLayoutScrollService) {
this.scrollService.onScroll()
.pipe(takeWhile(() => this.alive && this.isMobileView))
.subscribe(() => {
this.popovers.forEach((popover) => {
popover.hide();
});
});
}
clickIconHandler(icon: string) {
this.clickIcon.emit(icon);
}
trackByFn = (_, item) => item.order;
ngOnDestroy() {
this.alive = false;
}
}
================================================
FILE: src/app/@theme/components/modals/download-icon/download-icon.component.html
================================================
<div class="close-icon"
(click)="closeDialog()">
<i [innerHTML]="'close' | eva: { width: 36, height: 36, animationType: 'pulse' }"></i>
</div>
<nb-card>
<nb-card-body>
<div class="icon-container">
<i [innerHTML]="selectedIcon | eva: { width: 64, height: 64 }"></i>
<div class="icon-name">{{ selectedIcon }}</div>
</div>
<div class="download-controls">
<div *ngFor="let item of downloadControls"
(click)="clickOnDownloadIcon(item)"
[class.active]="item.format === selectedFormat"
>
<a href="{{ item.href }}" download>
<div class="download-control"
[ngClass]="item.format">
</div>
<div class="name">{{ item.title }}</div>
</a>
</div>
</div>
</nb-card-body>
</nb-card>
================================================
FILE: src/app/@theme/components/modals/download-icon/download-icon.component.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$primary: nb-theme(color-primary);
$white: nb-theme(color-white);
$separator-bg: #dde1eb;
display: block;
position: relative;
.close-icon {
position: absolute;
cursor: pointer;
top: 0;
left: calc(100% + 2.25rem);
}
nb-card {
width: 400px;
max-height: 481px;
font-family: nb-theme(font-main), sans-serif;
background: $white;
border: none;
border-radius: 0.75rem;
box-shadow: 0 6px 40px 0 rgba(0, 35, 106, 0.15);;
}
nb-card-body {
padding: 5.625rem 0 0;
border-radius: 0.75rem;
}
.icon-container {
display: flex;
flex-direction: column;
align-items: center;
color: nb-theme(color-fg);
}
.icon-name {
font-size: nb-theme(font-size-xlg);
margin-top: 3.75rem;
}
.download-controls {
display: flex;
justify-content: center;
background-color: nb-theme(color-gray-bg);
border-top: 1px solid $separator-bg;
margin-top: 4.5rem;
padding: 2rem 0 1.875rem;
> div {
margin-left: 1.5rem;
cursor: pointer;
&:first-child {
margin-left: 0;
}
a {
display: flex;
flex-direction: column;
align-items: center;
width: 6.5rem;
height: 6.5rem;
padding-top: 1.25rem;
background-color: $white;
border-radius: 0.75rem;
text-decoration: none;
&:hover {
background-color: rgba(51, 102, 255, 0.1);
}
&.active, &:active {
background-color: rgba(40, 77, 224, 0.2);
}
}
}
}
.download-control {
width: 2.5rem;
height: 2.5rem;
}
.svg {
background: url('../../../../../assets/img/shape.svg') no-repeat;
background-position: 50% 50%;
}
.png {
background: url('../../../../../assets/img/png.svg') no-repeat;
background-position: 50% 50%;
}
.name {
font-size: nb-theme(font-size-sm);
font-weight: nb-theme(font-weight-ultra-bold);
color: nb-theme(color-primary);
text-align: center;
margin-top: 0.375rem;
}
.select-size-container {
display: flex;
flex-direction: column;
align-items: center;
.title {
color: nb-theme(color-fg);
}
}
ul {
padding: 0;
}
.available-sizes {
display: inline-flex;
margin-top: 1.5rem;
border: 1px solid $primary;
border-radius: nb-theme(radius);
li {
list-style: none;
color: $primary;
padding: 1rem 1.25rem;
border-left: 1px solid $primary;
font-weight: nb-theme(font-weight-bold);
cursor: pointer;
&:first-child {
border-left: none;
}
&:hover, &.active, &:active {
background-color: $primary;
color: $white;
}
}
}
}
================================================
FILE: src/app/@theme/components/modals/download-icon/download-icon.component.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
import { UrlService } from '../../../../@core/data/service/url.service';
import { NbDialogRef } from '@nebular/theme';
import { EvaAnalytics } from '../../../services/analytics.service';
@Component({
selector: 'eva-download-icon',
styleUrls: ['./download-icon.component.scss'],
templateUrl: './download-icon.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DownloadIconComponent implements AfterViewInit {
@Input() selectedIcon: string = '';
@Input() iconType: string = '';
selectedFormat: string;
downloadControls: { format: string; title: string }[] = [];
constructor(private changeDetectorRef: ChangeDetectorRef,
private urlService: UrlService,
protected dialogRef: NbDialogRef<DownloadIconComponent>,
private analytics: EvaAnalytics) {}
ngAfterViewInit() {
this.downloadControls =
this.urlService.getDownloadItemsDate(this.iconType, this.selectedIcon);
this.changeDetectorRef.detectChanges();
}
closeDialog() {
this.dialogRef.close();
}
clickOnDownloadIcon(icon: { format: string; title: string }) {
this.analytics.trackEvent('downloadIcon', `${this.selectedIcon}.${icon.format}`);
}
}
================================================
FILE: src/app/@theme/components/page-container/page-container.component.html
================================================
<div class="title">
<i class="heart"></i>
<span class="version mobile">v{{currentVersion}}</span>
<h1>
Eva icons
<span class="version desktop">v{{currentVersion}}</span>
</h1>
</div>
<p class="description">
Eva Icons is a pack of more than <span>480</span> beautifully crafted Open Source icons for common actions and items.<br/>
Download our set on the desktop to use them in your digital products for Web, iOS and Android.<br/>
Compatible with <a class="eva-ds-link" href="https://eva.design?utm_campaign=eva_design%20-%20home%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=top_description_link">Eva Design System</a>.
</p>
<div class="search" [class.search-focus]="isInputFocus">
<i [innerHTML]="'search-outline' | eva: { width: 24, height: 24 }"></i>
<input class="search-input"
(focus)="handleFocusInput()"
(blur)="handleBlurInput()"
[attr.placeholder]="placeholder"
#searchInput
autocomplete="off"
tabindex="-1"/>
</div>
<div class="actions">
<section class="left-actions">
<eva-type-switcher (changeIconsType)="changeIconsType($event)"
[isMobileView]="isMobileMode"
[iconsType]="iconsType">
</eva-type-switcher>
</section>
<section class="right-action">
<span class="animation-title">Animation:</span>
<eva-animation-switcher (changeAnimation)="changeAnimation($event)"
[isMobileView]="isMobileMode"
[animation]="animation">
</eva-animation-switcher>
</section>
</div>
<div class="icons" #iconsBlock>
<eva-icon-list *ngIf="!noSearchResults"
[icons]="icons"
[animationType]="animation"
[isMobileView]="isMobileMode"
(clickIcon)="clickIcon($event)">
</eva-icon-list>
<div *ngIf="noSearchResults"
class="info-message">
{{ message }}
</div>
<div *ngIf="isLoading"
class="spinner-container"
[nbSpinner]="isLoading"
nbSpinnerMessage=""
nbSpinnerStatus="primary"
nbSpinnerSize="xxlarge">
</div>
</div>
================================================
FILE: src/app/@theme/components/page-container/page-container.component.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$primary: nb-theme(color-primary);
$search-input-padding-sides: 1rem;
$search-input-padding-tops: 1rem;
$search-input-mobile-padding-sides: 0.5rem;
$search-input-mobile-padding-tops: 1rem;
$search-placeholder-color: #a6aebd;
$version-color: #0fba81;
$version-bg: #edfff3;
$description-color: #5670a1;
$search-icon-fill-color: #a6aebd;
$actions-color: #a7b4cc;
margin-top: 4.5rem;
margin-bottom: 3rem;
display: block;
.title {
position: relative;
}
.version {
font-family: nb-theme(font-main), sans-serif;
background-color: $version-bg;
position: relative;
bottom: 0.35rem;
font-size: nb-theme(font-size);
font-weight: nb-theme(font-weight-bold);
color: $version-color;
padding: 0.3125rem 0.6875rem 0.3125rem 0.8125rem;
border-radius: nb-theme(custiom-radius);
text-transform: none;
}
h1 {
font-family: 'Raleway Bold', Arial, Helvetica, Geneva, sans-serif;
color: $primary;
font-size: 5rem;
padding-left: 6.625rem;
text-transform: capitalize;
margin-bottom: 1rem;
}
.description {
color: $description-color;
font-size: nb-theme(font-size-lg);
line-height: 1.625;
margin-bottom: 2rem;
span {
font-weight: nb-theme(font-weight-ultra-bold);
}
.eva-ds-link {
color: nb-theme(color-primary);
}
}
// search
.search {
width: 100%;
position: relative;
i {
position: absolute;
left: $search-input-padding-sides;
top: 1rem;
fill: $search-icon-fill-color;
}
&.search-focus {
i {
fill: $primary;
}
}
}
.heart {
position: absolute;
top: 1.25rem;
left: 1.375rem;
width: 3.75rem;
height: 3.75rem;
background: url('../../../../assets/img/heart.svg') no-repeat;
background-position: 50% 50%;
background-size: contain;
}
.search-input {
width: 100%;
border: none;
background-color: nb-theme(color-gray-bg);
color: $primary;
padding: $search-input-padding-tops $search-input-padding-sides;
padding-left: 4rem;
line-height: 1.5;
border-radius: nb-theme(custiom-radius);
&::placeholder {
color: $search-icon-fill-color;
}
&::-ms-clear {
display: none;
}
}
// search
// actions
.actions {
display: flex;
justify-content: space-between;
margin-top: 2.875rem;
}
.right-action {
display: flex;
color: $actions-color;
}
.animation-title {
margin-right: 1.625rem;
}
// actions
// icons container
.icons {
position: relative;
}
// icons container
eva-icon-list {
margin-top: 3rem;
}
.spinner-container {
width: 100%;
height: 25vh;
}
.info-message {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 7rem;
width: 70%;
margin: 2.5rem auto;
text-align: center;
font-size: nb-theme(font-size-lg);
background-color: nb-theme(info-bg);
color: nb-theme(info-fg);
border-radius: 0.75rem;
}
@include media-breakpoint-up(sm) {
.mobile {
display: none;
}
}
@include media-breakpoint-down(lg) {
padding-left: 1rem;
padding-right: 1rem;
}
@include media-breakpoint-down(sm) {
margin-top: 0;
.desktop {
display: none;
}
.title {
display: flex;
flex-direction: column;
align-items: center;
}
.heart {
position: static;
display: block;
margin-bottom: 0.875rem;
}
.version {
position: static;
}
h1 {
margin-top: 0.75rem;
margin-bottom: 2rem;
padding-left: 0;
font-size: 4rem;
}
.description {
margin-bottom: 4rem;
font-size: nb-theme(font-size);
br {
display: none;
}
}
.actions {
flex-direction: column;
align-items: center;
margin-top: 4rem;
.right-action {
margin-top: 2.5rem;
}
}
.animation-title {
display: none;
}
.info-message {
width: 100%;
padding: 0 1rem;
}
}
@media (min-width: 315px) and (max-width: 370px) {
h1 {
font-size: 3.5rem;
}
}
}
================================================
FILE: src/app/@theme/components/page-container/page-container.component.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import {
AfterViewInit,
Component,
ElementRef,
OnDestroy,
ViewChild,
} from '@angular/core';
import {
NbDialogService,
NbMediaBreakpoint,
NbMediaBreakpointsService,
NbThemeService,
} from '@nebular/theme';
import { ActivatedRoute, Router } from '@angular/router';
import { fromEvent } from 'rxjs/internal/observable/fromEvent';
import { IconService, IconServiceData } from '../../../@core/data/service/icons/icon.service';
import { debounceTime, delay, mergeMap, takeWhile, tap } from 'rxjs/operators';
import { DownloadIconComponent } from '../modals/download-icon/download-icon.component';
import { DialogStateService } from '../../services/dialog-state.service';
import { EvaVersionService } from '../../services/version.service';
import { EvaAnalytics } from '../../services/analytics.service';
@Component({
selector: 'eva-page-container',
templateUrl: 'page-container.component.html',
styleUrls: ['page-container.component.scss'],
})
export class PageContainerComponent implements AfterViewInit, OnDestroy {
private alive = true;
@ViewChild('searchInput') searchInput: ElementRef;
@ViewChild('iconsBlock') iconsElement: ElementRef;
currentVersion: string;
iconsType: string = 'outline';
isInputFocus = false;
icons: string[] = [];
message: string = '';
breakpoint: NbMediaBreakpoint = { name: '', width: 0 };
breakpoints: any;
animation: string = 'zoom';
constructor(private iconService: IconService,
private router: Router,
private activatedRoute: ActivatedRoute,
private dialogService: NbDialogService,
private breakpointService: NbMediaBreakpointsService,
private themeService: NbThemeService,
private dialogStateService: DialogStateService,
private versionService: EvaVersionService,
private analytics: EvaAnalytics) {
this.currentVersion = this.versionService.getEvoVersion();
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeService.onMediaQueryChange()
.pipe(takeWhile(() => this.alive))
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
}
ngAfterViewInit() {
this.activatedRoute.queryParams
.pipe(
takeWhile(() => this.alive),
delay(0),
tap((params) => {
const inputValue = this.searchInput.nativeElement.value;
if (!inputValue && params.searchKey) {
this.searchInput.nativeElement.value = params.searchKey;
}
if (params.type && this.iconsType !== params.type) {
this.iconsType = params.type;
}
}),
mergeMap((params) => {
return params.searchKey && params.type ?
this.iconService.getFilteredIconsData(params.searchKey, params.type) :
this.iconService.getIconsData(this.iconsType);
}),
)
.subscribe((iconsData: IconServiceData) => {
this.icons = iconsData.icons;
this.message = iconsData.message;
});
fromEvent(this.searchInput.nativeElement, 'keyup')
.pipe(
takeWhile(() => this.alive),
debounceTime(500),
)
.subscribe((event: any) => {
const searchKeyValue = event.target.value;
if (searchKeyValue) {
this.updateQueryParams({ searchKey: searchKeyValue, type: this.iconsType });
} else {
const url = this.router.url.substring(0, this.router.url.indexOf('?'));
this.router.navigateByUrl(url);
}
});
}
get placeholder() {
return this.isLoading || this.noSearchResults ? '' : `Search ${this.icons.length} Icons`;
}
get noSearchResults() {
return (
this.message &&
this.icons.length === 0
);
}
get isLoading() {
return (
!this.message &&
this.icons.length === 0
);
}
get isMobileMode() {
return this.breakpoint.width <= this.breakpoints.sm;
}
clickIcon(icon) {
this.analytics.trackEvent('openIconDialog', icon);
if (this.isMobileMode) {
return;
}
const modalRef = this.dialogService.open(
DownloadIconComponent,
{
backdropClass: 'download-icon',
},
);
const componentInstance = modalRef.componentRef.instance;
componentInstance.selectedIcon = icon;
componentInstance.iconType = this.iconsType;
this.dialogStateService.changeDialogState('open');
modalRef.onClose
.subscribe(() => {
this.dialogStateService.changeDialogState('close');
});
}
handleFocusInput() {
this.isInputFocus = true;
}
handleBlurInput() {
this.isInputFocus = false;
}
changeAnimation(animationType) {
this.animation = animationType;
}
changeIconsType(iconsType) {
this.iconsType = iconsType;
this.icons = [];
this.updateQueryParams({ type: iconsType });
}
updateQueryParams(queryParams) {
this.router.navigate(
[],
{
relativeTo: this.activatedRoute,
queryParamsHandling: 'merge',
queryParams,
});
}
ngOnDestroy() {
this.alive = false;
}
}
================================================
FILE: src/app/@theme/components/type-switcher/type-switcher.component.html
================================================
<ul>
<li *ngFor="let item of navItems"
class="nav-item"
[class.active]="item.type === iconsType"
(click)="changeType(item.type)">
<i class="nav-menu-icon"
[innerHTML]="item.iconName | eva">
</i>
<span class="title">{{ item.title }}</span>
</li>
</ul>
================================================
FILE: src/app/@theme/components/type-switcher/type-switcher.component.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$primary: nb-theme(color-primary);
$item-color: #a7b4cc;
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: flex;
align-items: baseline;
position: relative;
text-decoration: none;
font-size: nb-theme(font-size-sm);
color: $item-color;
cursor: pointer;
&:not(:first-child) {
margin-left: 1.75rem;
}
&:hover, &.active, &:focus {
color: $primary;
text-shadow: 0.5px 0 0 currentColor;
font-weight: normal;
outline: none!important;
.nav-menu-icon {
fill: $primary;
}
}
.nav-menu-icon {
margin-right: 0.5rem;
fill: $item-color;
}
span {
font-size: nb-theme(font-size-sm);
}
}
@include media-breakpoint-down(lg) {
}
@include media-breakpoint-down(sm) {
a {
span {
display: none;
}
}
}
}
================================================
FILE: src/app/@theme/components/type-switcher/type-switcher.component.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'eva-type-switcher',
templateUrl: './type-switcher.component.html',
styleUrls: ['./type-switcher.component.scss'],
})
export class TypeSwitcherComponent {
@Output() changeIconsType: EventEmitter<string> = new EventEmitter();
@Input() iconsType: string;
@Input() isMobileView: string;
navItems = [
{
title: 'Outline',
type: 'outline',
iconName: 'star-outline',
},
{
title: 'Fill',
type: 'fill',
iconName: 'star',
},
];
changeType(value) {
this.changeIconsType.emit(value);
this.iconsType = value;
}
}
================================================
FILE: src/app/@theme/pipes/eva-icons.pipe.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { DomSanitizer } from '@angular/platform-browser';
import { Pipe, PipeTransform } from '@angular/core';
import { icons } from '../../../../package-build/eva';
@Pipe({ name: 'eva' })
export class EvaIconsPipe implements PipeTransform {
private defaultOptions = {
height: 24,
width: 24,
fill: 'inherit',
animationHover: true,
animationInfinity: false,
};
constructor(private sanitizer: DomSanitizer) {}
transform(icon: string,
options: {
height: number;
width: number;
fill: string;
animationType?: string;
animationHover?: boolean;
animationInfinity?: boolean;
},
) {
const mergedOptions = {
...this.defaultOptions,
...options,
};
const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
const animation = animationType ?
{ type: animationType, hover: animationHover, infinite: animationInfinity } :
null;
return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
width,
height,
fill,
animation,
}));
}
}
================================================
FILE: src/app/@theme/services/analytics.service.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Injectable, Inject } from '@angular/core';
import { NB_WINDOW } from '@nebular/theme';
@Injectable()
export class EvaAnalytics {
private enabled: boolean;
constructor(@Inject(NB_WINDOW) private window) {
this.enabled = this.window.location.href.indexOf('akveo.github.io') >= 0;
}
trackEvent(eventName: string, eventVal: string = '') {
if (this.enabled) {
this.gtmPushToDataLayer({ event: eventName, eventValue: eventVal });
}
}
// Push to 'dataLayer' Google Tag Manager array
private gtmPushToDataLayer(params) {
this.window.dataLayer.push(params);
}
}
================================================
FILE: src/app/@theme/services/dialog-state.service.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Injectable } from '@angular/core';
import { Observable, ReplaySubject } from 'rxjs';
import { share } from 'rxjs/operators';
@Injectable()
export class DialogStateService {
protected dialogState$ = new ReplaySubject();
changeDialogState(state: string) {
this.dialogState$.next({state});
}
onChangeDialogState(): Observable<any> {
return this.dialogState$.pipe(share());
}
}
================================================
FILE: src/app/@theme/services/index.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { EvaVersionService } from './version.service';
import { DialogStateService } from './dialog-state.service';
import { EvaAnalytics } from './analytics.service';
export const evaServices = [
EvaVersionService,
DialogStateService,
EvaAnalytics,
];
================================================
FILE: src/app/@theme/services/version.service.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Injectable } from '@angular/core';
@Injectable()
export class EvaVersionService {
getEvoVersion() {
return require('../../../../package.json').version;
}
}
================================================
FILE: src/app/@theme/styles/_raleway.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
$raleway-font-path: 'assets/fonts/raleway' !default;
@font-face {
font-family: 'Raleway Bold';
src: url('#{$raleway-font-path}/Raleway-Bold.eot');
src: local('Raleway Bold'), local('Raleway-Bold'),
url('#{$raleway-font-path}/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
url('#{$raleway-font-path}/Raleway-Bold.woff') format('woff'),
url('#{$raleway-font-path}/Raleway-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
================================================
FILE: src/app/@theme/styles/styles.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import 'raleway';
@import 'themes';
@import '~@nebular/theme/styles/globals';
@import '~@nebular/bootstrap/styles/globals';
@include nb-install() {
@include nb-theme-global();
@include nb-bootstrap-global();
};
================================================
FILE: src/app/@theme/styles/themes.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/corporate';
$nb-enabled-themes: (eva);
/* stylelint-disable */
$nb-themes: nb-register-theme((
content-width: 1120px,
color-primary: #3366ff,
separator: transparent,
color-bg: transparent,
color-fg: #0d1c2e,
color-fg-heading: #546d8d,
color-fg-text: #919fb1,
color-fg-icon: #c4c8d1,
color-gray-bg: #edf0f5,
shadow: none,
layout-bg: transparent,
layout-padding: 0,
layout-medium-padding: 0,
layout-small-padding: 0,
header-bg: color-bg,
header-padding: 0 0,
header-height: 4.25rem,
header-fg: color-fg,
header-section-border-color: #f5f5f5,
header-button-border: #dce4f2,
menu-bg: transparent,
menu-item-padding: 0.675rem 1rem,
menu-item-fg: #8992a3,
menu-active-fg: color-primary,
menu-font-size: 0.95rem,
menu-font-weight: font-weight-normal,
menu-active-bg: transparent,
footer-height: 18.75rem,
footer-padding: 1.25rem 0,
footer-fg: #8992a3,
footer-fg-highlight: footer-fg,
footer-separator: transparent,
list-icon-item-bg: #ebf1fa,
list-icon-item-fg: #0d1c2e,
switcher-view-bg: #d8e1f0,
checkbox-checked-bg: #00db92,
checkbox-checked-border-color: checkbox-checked-bg,
checkbox-checked-checkmark: color-white,
format-name-fg: #6a7385,
popover-bg: #0d1c2e,
popover-fg: #ffffff,
popover-border: #0d1c2e,
popover-border-radius: 0.75rem,
popover-arrow-size: 6px,
info-bg: #fff2f2,
info-fg: #ff3d71,
custiom-radius: 0.625rem,
), eva, corporate);
================================================
FILE: src/app/@theme/theme.module.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { RouterModule } from '@angular/router';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// components
import { FooterComponent } from './components/footer/footer.component';
import { HeaderComponent } from './components/header/header.component';
import { DownloadIconComponent } from './components/modals/download-icon/download-icon.component';
import { PageContainerComponent } from './components/page-container/page-container.component';
import { IconListComponent } from './components/icon-list/icon-list.component';
import { TypeSwitcherComponent } from './components/type-switcher/type-switcher.component';
import { AnimationSwitcherComponent } from './components/animation-switcher/animation-switcher.component';
// components
// services
import { evaServices } from './services';
// services
// pipes
import { EvaIconsPipe } from './pipes/eva-icons.pipe';
// pipes
import {
NbMenuModule,
NbLayoutModule,
NbCardModule,
NbThemeModule,
NbOverlayModule,
NbDialogModule,
NbCheckboxModule,
NbSpinnerModule,
NbPopoverModule, NbSelectModule,
} from '@nebular/theme';
const COMPONENTS = [
FooterComponent,
HeaderComponent,
DownloadIconComponent,
PageContainerComponent,
IconListComponent,
TypeSwitcherComponent,
AnimationSwitcherComponent,
];
const PIPES = [
EvaIconsPipe,
];
@NgModule({
imports: [
RouterModule,
CommonModule,
NbMenuModule,
NbLayoutModule,
NbCardModule,
NbOverlayModule,
NbDialogModule,
NbCheckboxModule,
NbSpinnerModule,
NbPopoverModule,
NbSelectModule,
],
declarations: [
...COMPONENTS,
...PIPES,
],
exports: [
RouterModule,
CommonModule,
NbMenuModule,
NbLayoutModule,
NbCardModule,
NbDialogModule,
NbOverlayModule,
NbCheckboxModule,
NbSpinnerModule,
NbSelectModule,
FooterComponent,
HeaderComponent,
PageContainerComponent,
IconListComponent,
...PIPES,
],
entryComponents: [
DownloadIconComponent,
],
})
export class EvaThemeModule {
static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{
ngModule: EvaThemeModule,
providers: [
...NbThemeModule.forRoot({ name: 'eva' }).providers,
...evaServices,
...NbMenuModule.forRoot().providers,
...NbOverlayModule.forRoot().providers,
...NbDialogModule.forRoot().providers,
],
};
}
}
================================================
FILE: src/app/app.component.html
================================================
<nb-layout [class.blur]="isOpenDialog" [withScroll]="true">
<nb-layout-header>
<eva-header></eva-header>
</nb-layout-header>
<nb-layout-column>
<eva-page-container></eva-page-container>
</nb-layout-column>
<nb-layout-footer fixed>
<eva-footer></eva-footer>
</nb-layout-footer>
</nb-layout>
================================================
FILE: src/app/app.component.scss
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
$blur-background: #e9eaec;
$content-width: nb-theme(content-width);
$popover-border-width: calc(#{nb-theme(popover-arrow-size)} - 2px);
.content-center {
max-width: $content-width;
width: 100%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
}
.contact-us {
padding: 5rem 1rem;
h2 {
color: black;
}
}
/deep/ nb-popover {
font-family: nb-theme(font-main), sans-serif;
nb-overlay-container {
.primitive-overlay {
box-shadow: 0 6px 10px 0 rgba(51, 102, 255, 0.16);
padding: 0.4rem 1rem 0.5rem;
font-size: nb-theme(font-size-sm);
}
}
.arrow {
&::after {
border-left-width: $popover-border-width;
border-right-width: $popover-border-width;
border-bottom-width: $popover-border-width;
}
}
}
/deep/ nb-layout {
&.blur {
.layout {
filter: blur(5px);
background-color: $blur-background;
}
}
}
/deep/ nb-layout .main-container {
padding-top: 3rem;
.scrollable {
padding-top: 0;
}
}
/deep/ nb-layout .layout-container .columns {
max-width: $content-width;
margin: 0 auto;
}
/deep/ nb-layout-header {
nav {
max-width: $content-width;
margin: 0 auto;
}
}
/deep/ .content nb-layout-footer {
width: 100%;
background-color: #f7f8fa;
nav {
max-width: $content-width;
width: 100%;
margin: 0 auto;
}
}
@include media-breakpoint-down(xl) {
nb-layout-header /deep/ nav {
height: 8.25rem;
display: block;
}
}
}
================================================
FILE: src/app/app.component.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component } from '@angular/core';
import { DialogStateService } from './@theme/services/dialog-state.service';
@Component({
selector: 'eva-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
isOpenDialog = false;
constructor(private dialogStateService: DialogStateService) {
this.dialogStateService.onChangeDialogState()
.subscribe(({state}) => {
this.isOpenDialog = state === 'open';
});
}
}
================================================
FILE: src/app/app.module.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { EvaThemeModule } from './@theme/theme.module';
import { CoreModule } from './@core/core.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
RouterModule.forRoot(
[
{ path: '', component: AppComponent },
{ path: '**', redirectTo: '' },
],
{
useHash: true,
},
),
EvaThemeModule.forRoot(),
CoreModule.forRoot(),
],
bootstrap: [AppComponent],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
],
})
export class AppModule { }
================================================
FILE: src/assets/.gitkeep
================================================
================================================
FILE: src/browserslist
================================================
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
> 0.5%
last 2 versions
Firefox ESR
not dead
# IE 9-11
================================================
FILE: src/environments/environment.prod.ts
================================================
export const environment = {
production: true,
};
================================================
FILE: src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false,
};
================================================
FILE: src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<script>
dataLayer = [];
</script>
<meta charset="utf-8">
<title>Eva Icons - beautifully crafted Open Source UI icons for common actions and items.</title>
<meta name="description" content="Eva Icons is a pack of 480 delightful icons available for free. Download Eva Icons to use them in your products for mobile and web apps. Available as SVG, PNG, Web Font and Sketch. Open Source, built by the Nebular team.">
<meta name="keywords" content="icons,icons pack,icons font,icons set,icons free,icons android,png a icons,icons copy and paste,icons css,icons collection,icons desktop,icons design,icons images, icons font">
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K8MXX5F');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K8MXX5F"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<eva-app></eva-app>
</body>
</html>
================================================
FILE: src/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
================================================
FILE: src/main.ts
================================================
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
================================================
FILE: src/polyfills.ts
================================================
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// (window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
================================================
FILE: src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
================================================
FILE: src/tsconfig.app.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "./",
"types": [],
"paths": {
"@angular/*": [
"../node_modules/@angular/*"
],
"@nebular/*": [
"../node_modules/@nebular/*"
]
}
},
"exclude": [
"test.ts",
"**/*.spec.ts",
"../node_modules/@nebular/**/*.spec.ts"
],
"include": [
"../src/*.ts",
"../src/**/*.ts",
"../node_modules/@nebular/**/*.ts"
]
}
================================================
FILE: src/tsconfig.spec.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts",
"polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
================================================
FILE: src/typings.d.ts
================================================
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
id: string;
}
declare var require: any;
================================================
FILE: test.html
================================================
<!DOCTYPE html>
<html lang="en">
<title></title>
<link rel="stylesheet" href="package-build/style/eva-icons.css">
<script src="https://unpkg.com/eva-icons"></script>
<body>
<i data-eva="github"></i>
<i data-eva="github" data-eva-fill="blue" data-eva-hover="true"></i>
<i class="eva eva-5x eva-github"></i>
<i class="eva eva-5x eva-github-outline"></i>
<script>
eva.replace({ animation: { type: 'pulse', infinite: true, hover: false }, fill: 'red', width: '100px', height: '100px' })
</script>
</body>
</html>
================================================
FILE: tsconfig.json
================================================
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"plugins": [
{ "name": "tslint-language-service"}
]
}
}
================================================
FILE: tslint.json
================================================
{
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules": {
"trailing-comma": [
true,
{
"multiline": "always",
"singleline": "never"
}
],
"arrow-return-shorthand": true,
"callable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"eofline": true,
"forin": true,
"import-blacklist": [
true
],
"import-spacing": true,
"indent": [
true,
"spaces"
],
"interface-over-type-literal": true,
"label-position": true,
"max-line-length": [
true,
120
],
"member-access": false,
"no-arg": true,
"no-console": [
true,
"debug",
"log",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-super": true,
"no-empty": false,
"no-empty-interface": true,
"no-eval": true,
"no-misused-new": true,
"no-non-null-assertion": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-string-throw": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unnecessary-initializer": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"prefer-const": true,
"quotemark": [
true,
"single"
],
"radix": true,
"semicolon": [
true,
"always"
],
"triple-equals": [
true,
"allow-null-check"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"typeof-compare": true,
"unified-signatures": true,
"variable-name": false,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
],
"directive-selector": [
true,
"attribute",
"eva",
"camelCase"
],
"component-selector": [
true,
"element",
"eva",
"kebab-case"
],
"ban": [
true,
"eval",
"fit",
"fdescribe",
{
"name": "$",
"message": "please don't"
}
],
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"no-output-rename": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"component-class-suffix": true,
"directive-class-suffix": true,
"no-unused-variable": true
}
}
================================================
FILE: webpack.config.js
================================================
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
console.log(path.join(__dirname, 'package/src/index.js'));
module.exports = {
entry: {
eva: path.join(__dirname, 'package/src/index.js'),
'eva.min': path.join(__dirname, 'package/src/index.js'),
},
output: {
path: path.join(__dirname, 'package-build'),
library: 'eva',
libraryTarget: 'umd',
filename: '[name].js',
umdNamedDefine: true,
globalObject: 'typeof self !== "undefined" ? self : this',
},
optimization: {
minimize: true,
minimizer: [
new UglifyJsPlugin({
include: /\.min\.js$/,
parallel: true,
sourceMap: true
})
]
},
mode: 'development',
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.scss$/,
use: [
"isomorphic-style-loader",
"css-loader",
"sass-loader"
]
}
]
}
};
gitextract_wrxiy02k/ ├── .editorconfig ├── .gitignore ├── .stylelintrc.json ├── LICENSE.txt ├── README.md ├── angular.json ├── e2e/ │ ├── src/ │ │ ├── app.e2e-spec.ts │ │ └── rounting.e2e-spec.ts │ └── tsconfig.e2e.json ├── package/ │ ├── archive/ │ │ ├── Eva Icons.fig │ │ └── Eva Icons.sketch │ └── src/ │ ├── animation.scss │ ├── default-attrs.json │ ├── icon.js │ ├── icons.js │ ├── index.js │ └── replace.js ├── package.json ├── scripts/ │ ├── config.js │ ├── helpers/ │ │ ├── fs-helper.js │ │ └── gm-helper.js │ ├── index.js │ ├── package.json │ └── services/ │ ├── build-icons-json.js │ ├── build-icons-object.js │ ├── build-sprite-string.js │ ├── build-sprite.js │ ├── build-web-font.js │ ├── merge-icons-json.js │ ├── oprimize-svg.js │ ├── process-pngs.js │ ├── process-scss.js │ ├── process-svgs.js │ ├── rename-icon.js │ ├── transform-icons.js │ ├── transform-png-icons.js │ ├── web-font-process-svgs.js │ └── zip.js ├── src/ │ ├── app/ │ │ ├── @core/ │ │ │ ├── core.module.ts │ │ │ ├── data/ │ │ │ │ ├── data.module.ts │ │ │ │ └── service/ │ │ │ │ ├── icons/ │ │ │ │ │ ├── fill-icons-order.ts │ │ │ │ │ ├── icon.service.ts │ │ │ │ │ ├── icons-tags.ts │ │ │ │ │ └── outline-icons-order.ts │ │ │ │ └── url.service.ts │ │ │ └── module-import-guard.ts │ │ ├── @theme/ │ │ │ ├── components/ │ │ │ │ ├── animation-switcher/ │ │ │ │ │ ├── animation-switcher.component.html │ │ │ │ │ ├── animation-switcher.component.scss │ │ │ │ │ └── animation-switcher.component.ts │ │ │ │ ├── footer/ │ │ │ │ │ ├── footer.component.html │ │ │ │ │ ├── footer.component.scss │ │ │ │ │ └── footer.component.ts │ │ │ │ ├── header/ │ │ │ │ │ ├── header.component.html │ │ │ │ │ ├── header.component.scss │ │ │ │ │ └── header.component.ts │ │ │ │ ├── icon-list/ │ │ │ │ │ ├── icon-list.component.html │ │ │ │ │ ├── icon-list.component.scss │ │ │ │ │ └── icon-list.component.ts │ │ │ │ ├── modals/ │ │ │ │ │ └── download-icon/ │ │ │ │ │ ├── download-icon.component.html │ │ │ │ │ ├── download-icon.component.scss │ │ │ │ │ └── download-icon.component.ts │ │ │ │ ├── page-container/ │ │ │ │ │ ├── page-container.component.html │ │ │ │ │ ├── page-container.component.scss │ │ │ │ │ └── page-container.component.ts │ │ │ │ └── type-switcher/ │ │ │ │ ├── type-switcher.component.html │ │ │ │ ├── type-switcher.component.scss │ │ │ │ └── type-switcher.component.ts │ │ │ ├── pipes/ │ │ │ │ └── eva-icons.pipe.ts │ │ │ ├── services/ │ │ │ │ ├── analytics.service.ts │ │ │ │ ├── dialog-state.service.ts │ │ │ │ ├── index.ts │ │ │ │ └── version.service.ts │ │ │ ├── styles/ │ │ │ │ ├── _raleway.scss │ │ │ │ ├── styles.scss │ │ │ │ └── themes.scss │ │ │ └── theme.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets/ │ │ └── .gitkeep │ ├── browserslist │ ├── environments/ │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── karma.conf.js │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── test.html ├── tsconfig.json ├── tslint.json └── webpack.config.js
SYMBOL INDEX (106 symbols across 27 files)
FILE: package/src/icon.js
class Icon (line 16) | class Icon {
method constructor (line 17) | constructor(name, contents) {
method toSvg (line 26) | toSvg(attrs = {}) {
method toString (line 40) | toString() {
function getAnimationOptions (line 45) | function getAnimationOptions(animation) {
function attrsToString (line 72) | function attrsToString(attrs) {
FILE: package/src/replace.js
function replace (line 23) | function replace(options = {}) {
function replaceElement (line 35) | function replaceElement(element, options = {}) {
function getAttrs (line 53) | function getAttrs(element) {
function getAttr (line 71) | function getAttr(attr) {
function getAnimationObject (line 83) | function getAnimationObject(optionsAnimation, elementAttrsAnimation) {
FILE: scripts/helpers/fs-helper.js
method remove (line 10) | remove(srcPath) {
method getFilesByPath (line 14) | getFilesByPath(srcPath) {
method mkDirByPathSync (line 32) | mkDirByPathSync(targetDir) {
method copy (line 40) | copy(srcPath, desPath) {
method isFolder (line 48) | isFolder(path) {
method getExtension (line 52) | getExtension(fileName) {
method trimFileExtension (line 57) | trimFileExtension(fileName) {
FILE: scripts/helpers/gm-helper.js
method convertAndResize (line 10) | convertAndResize(size, format, srcPath) {
method convert (line 16) | convert(format, srcPath) {
method resize (line 21) | resize(size, srcPath) {
method convertSvgToPng (line 26) | convertSvgToPng(size, format, srcPath) {
FILE: scripts/services/build-sprite-string.js
constant DEFAULT_ATTRS (line 7) | const DEFAULT_ATTRS = require('../../package/src/default-attrs.json');
FILE: scripts/services/transform-icons.js
class TransformIcons (line 13) | class TransformIcons {
method constructor (line 14) | constructor(srcFile, srcFilePath, desPath, options) {
method getAndMakeDesFolder (line 24) | getAndMakeDesFolder(...desPath) {
method convert (line 32) | convert() {
method resize (line 43) | resize() {
FILE: scripts/services/transform-png-icons.js
class TransformPngIcons (line 8) | class TransformPngIcons extends TransformIcons {
method constructor (line 9) | constructor(...args) {
method convertAndResizeSvgToPng (line 13) | convertAndResizeSvgToPng() {
FILE: src/app/@core/core.module.ts
constant PIPES (line 13) | const PIPES = [
constant NB_CORE_PROVIDERS (line 16) | const NB_CORE_PROVIDERS = [
class CoreModule (line 27) | class CoreModule {
method constructor (line 28) | constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
method forRoot (line 32) | static forRoot(): ModuleWithProviders {
FILE: src/app/@core/data/data.module.ts
constant SERVICES (line 13) | const SERVICES = [
class DataModule (line 26) | class DataModule {
method forRoot (line 27) | static forRoot(): ModuleWithProviders {
FILE: src/app/@core/data/service/icons/icon.service.ts
class Icon (line 15) | class Icon {
class Icons (line 21) | class Icons {
class IconServiceData (line 26) | class IconServiceData {
class IconService (line 32) | class IconService {
method constructor (line 47) | constructor() {
method getIconData (line 65) | getIconData(icoName: string, iconType: string): Icon {
method getIconsTags (line 76) | getIconsTags(groupName: string, icoName: string): string[] {
method getIconsData (line 82) | getIconsData(type: string): Observable<IconServiceData> {
method getFilteredIconsData (line 88) | getFilteredIconsData(searchKey: string, type: string): Observable<Icon...
FILE: src/app/@core/data/service/url.service.ts
class UrlService (line 12) | class UrlService {
method getDownloadItemUrl (line 40) | getDownloadItemUrl(format) {
method getZippedIconsUrl (line 46) | getZippedIconsUrl() {
method getDownloadItemsDate (line 52) | getDownloadItemsDate(type, name) {
method getIconHref (line 67) | private getIconHref(href, matches) {
FILE: src/app/@core/module-import-guard.ts
function throwIfAlreadyLoaded (line 7) | function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
FILE: src/app/@theme/components/animation-switcher/animation-switcher.component.ts
class AnimationSwitcherComponent (line 15) | class AnimationSwitcherComponent implements OnInit {
method ngOnInit (line 24) | ngOnInit() {
method changeAnimationType (line 51) | changeAnimationType(value) {
FILE: src/app/@theme/components/footer/footer.component.ts
class FooterComponent (line 14) | class FooterComponent {
FILE: src/app/@theme/components/header/header.component.ts
class HeaderComponent (line 17) | class HeaderComponent {
method constructor (line 21) | constructor(private urlService: UrlService,
method clickOnDownloadPack (line 27) | clickOnDownloadPack() {
FILE: src/app/@theme/components/icon-list/icon-list.component.ts
class IconListComponent (line 25) | class IconListComponent implements OnDestroy {
method constructor (line 37) | constructor(private scrollService: NbLayoutScrollService) {
method clickIconHandler (line 47) | clickIconHandler(icon: string) {
method ngOnDestroy (line 53) | ngOnDestroy() {
FILE: src/app/@theme/components/modals/download-icon/download-icon.component.ts
class DownloadIconComponent (line 18) | class DownloadIconComponent implements AfterViewInit {
method constructor (line 26) | constructor(private changeDetectorRef: ChangeDetectorRef,
method ngAfterViewInit (line 31) | ngAfterViewInit() {
method closeDialog (line 38) | closeDialog() {
method clickOnDownloadIcon (line 42) | clickOnDownloadIcon(icon: { format: string; title: string }) {
FILE: src/app/@theme/components/page-container/page-container.component.ts
class PageContainerComponent (line 35) | class PageContainerComponent implements AfterViewInit, OnDestroy {
method constructor (line 51) | constructor(private iconService: IconService,
method ngAfterViewInit (line 70) | ngAfterViewInit() {
method placeholder (line 115) | get placeholder() {
method noSearchResults (line 119) | get noSearchResults() {
method isLoading (line 126) | get isLoading() {
method isMobileMode (line 133) | get isMobileMode() {
method clickIcon (line 137) | clickIcon(icon) {
method handleFocusInput (line 163) | handleFocusInput() {
method handleBlurInput (line 167) | handleBlurInput() {
method changeAnimation (line 171) | changeAnimation(animationType) {
method changeIconsType (line 175) | changeIconsType(iconsType) {
method updateQueryParams (line 182) | updateQueryParams(queryParams) {
method ngOnDestroy (line 192) | ngOnDestroy() {
FILE: src/app/@theme/components/type-switcher/type-switcher.component.ts
class TypeSwitcherComponent (line 15) | class TypeSwitcherComponent {
method changeType (line 35) | changeType(value) {
FILE: src/app/@theme/pipes/eva-icons.pipe.ts
class EvaIconsPipe (line 13) | class EvaIconsPipe implements PipeTransform {
method constructor (line 23) | constructor(private sanitizer: DomSanitizer) {}
method transform (line 25) | transform(icon: string,
FILE: src/app/@theme/services/analytics.service.ts
class EvaAnalytics (line 11) | class EvaAnalytics {
method constructor (line 14) | constructor(@Inject(NB_WINDOW) private window) {
method trackEvent (line 18) | trackEvent(eventName: string, eventVal: string = '') {
method gtmPushToDataLayer (line 25) | private gtmPushToDataLayer(params) {
FILE: src/app/@theme/services/dialog-state.service.ts
class DialogStateService (line 12) | class DialogStateService {
method changeDialogState (line 16) | changeDialogState(state: string) {
method onChangeDialogState (line 20) | onChangeDialogState(): Observable<any> {
FILE: src/app/@theme/services/version.service.ts
class EvaVersionService (line 10) | class EvaVersionService {
method getEvoVersion (line 12) | getEvoVersion() {
FILE: src/app/@theme/theme.module.ts
constant COMPONENTS (line 41) | const COMPONENTS = [
constant PIPES (line 51) | const PIPES = [
class EvaThemeModule (line 97) | class EvaThemeModule {
method forRoot (line 98) | static forRoot(): ModuleWithProviders {
FILE: src/app/app.component.ts
class AppComponent (line 15) | class AppComponent {
method constructor (line 19) | constructor(private dialogStateService: DialogStateService) {
FILE: src/app/app.module.ts
class AppModule (line 44) | class AppModule { }
FILE: src/typings.d.ts
type NodeModule (line 9) | interface NodeModule {
Condensed preview — 96 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (157K chars).
[
{
"path": ".editorconfig",
"chars": 245,
"preview": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = "
},
{
"path": ".gitignore",
"chars": 491,
"preview": "# compiled output\n/dist\n/tmp\n/out-tsc\n/package-build\n\n# dependencies\n/node_modules\n\n# IDEs and editors\n/.idea\n.project\n."
},
{
"path": ".stylelintrc.json",
"chars": 2528,
"preview": "{\n \"rules\": {\n \"color-hex-case\": \"lower\",\n \"color-no-invalid-hex\": true,\n\n \"function-calc-no-unspaced-operator"
},
{
"path": "LICENSE.txt",
"chars": 1074,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2018 Akveo.\n\nPermission is hereby granted, free of charge, to any person obtaining "
},
{
"path": "README.md",
"chars": 5617,
"preview": "<h1><img src=\"https://i.imgur.com/cXYo5bi.png\"> Eva Icons</h1>\n<img src=\"https://i.imgur.com/oDmqDkE.jpg\">\n\n**Eva Icons*"
},
{
"path": "angular.json",
"chars": 4162,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \""
},
{
"path": "e2e/src/app.e2e-spec.ts",
"chars": 1373,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "e2e/src/rounting.e2e-spec.ts",
"chars": 1202,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "e2e/tsconfig.e2e.json",
"chars": 213,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"module\": \"commonjs\",\n "
},
{
"path": "package/src/animation.scss",
"chars": 1864,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "package/src/default-attrs.json",
"chars": 101,
"preview": "{\n \"xmlns\": \"http://www.w3.org/2000/svg\",\n \"width\": 24,\n \"height\": 24,\n \"viewBox\": \"0 0 24 24\"\n}\n"
},
{
"path": "package/src/icon.js",
"chars": 2032,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "package/src/icons.js",
"chars": 407,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "package/src/index.js",
"chars": 348,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "package/src/replace.js",
"chars": 2216,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "package.json",
"chars": 2822,
"preview": "{\n \"name\": \"eva-icons-landing\",\n \"version\": \"1.1.3\",\n \"browserslist\": [\n \"> 1%\",\n \"last 2 versions\",\n \"IE 11"
},
{
"path": "scripts/config.js",
"chars": 494,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/helpers/fs-helper.js",
"chars": 1220,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/helpers/gm-helper.js",
"chars": 747,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/index.js",
"chars": 3401,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/package.json",
"chars": 573,
"preview": "{\n \"name\": \"eva-icons\",\n \"version\": \"1.1.3\",\n \"description\": \"Eva Icons - beautifully crafted Open Source UI icons fo"
},
{
"path": "scripts/services/build-icons-json.js",
"chars": 861,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/build-icons-object.js",
"chars": 892,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/build-sprite-string.js",
"chars": 634,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/build-sprite.js",
"chars": 899,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/build-web-font.js",
"chars": 1956,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/merge-icons-json.js",
"chars": 894,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/oprimize-svg.js",
"chars": 615,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/process-pngs.js",
"chars": 733,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/process-scss.js",
"chars": 2116,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/process-svgs.js",
"chars": 817,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/rename-icon.js",
"chars": 947,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/transform-icons.js",
"chars": 1632,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/transform-png-icons.js",
"chars": 1634,
"preview": "const fs = require('fs-extra');\nconst path = require('path');\n\nconst fileSystemHelper = require('../helpers/fs-helper');"
},
{
"path": "scripts/services/web-font-process-svgs.js",
"chars": 1075,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "scripts/services/zip.js",
"chars": 1123,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@core/core.module.ts",
"chars": 919,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@core/data/data.module.ts",
"chars": 715,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@core/data/service/icons/fill-icons-order.ts",
"chars": 5486,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@core/data/service/icons/icon.service.ts",
"chars": 2550,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@core/data/service/icons/icons-tags.ts",
"chars": 7444,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@core/data/service/icons/outline-icons-order.ts",
"chars": 7386,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@core/data/service/url.service.ts",
"chars": 1621,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@core/module-import-guard.ts",
"chars": 370,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/animation-switcher/animation-switcher.component.html",
"chars": 381,
"preview": "<ul>\n <li *ngFor=\"let item of animationItems\"\n class=\"nav-item eva-parent-hover\"\n [class.active]=\"item.animat"
},
{
"path": "src/app/@theme/components/animation-switcher/animation-switcher.component.scss",
"chars": 1477,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/animation-switcher/animation-switcher.component.ts",
"chars": 1215,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/footer/footer.component.html",
"chars": 2485,
"preview": "<div class=\"logo\">\n <a href=\"https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20website&utm_s"
},
{
"path": "src/app/@theme/components/footer/footer.component.scss",
"chars": 2688,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/footer/footer.component.ts",
"chars": 361,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/header/header.component.html",
"chars": 2605,
"preview": "<div class=\"section left\">\n <iframe class=\"stars mobile\"\n src=\"https://ghbtns.com/github-btn.html?user=akveo&r"
},
{
"path": "src/app/@theme/components/header/header.component.scss",
"chars": 4605,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/header/header.component.ts",
"chars": 968,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/icon-list/icon-list.component.html",
"chars": 752,
"preview": "<nb-card *ngFor=\"let icon of icons; trackBy: trackByFn\"\n (click)=\"clickIconHandler(icon.name)\">\n <nb-card-body "
},
{
"path": "src/app/@theme/components/icon-list/icon-list.component.scss",
"chars": 2187,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/icon-list/icon-list.component.ts",
"chars": 1403,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/modals/download-icon/download-icon.component.html",
"chars": 807,
"preview": "<div class=\"close-icon\"\n (click)=\"closeDialog()\">\n <i [innerHTML]=\"'close' | eva: { width: 36, height: 36, animatio"
},
{
"path": "src/app/@theme/components/modals/download-icon/download-icon.component.scss",
"chars": 3038,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/modals/download-icon/download-icon.component.ts",
"chars": 1492,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/page-container/page-container.component.html",
"chars": 2176,
"preview": "<div class=\"title\">\n <i class=\"heart\"></i>\n <span class=\"version mobile\">v{{currentVersion}}</span>\n <h1>\n Eva ico"
},
{
"path": "src/app/@theme/components/page-container/page-container.component.scss",
"chars": 4502,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/page-container/page-container.component.ts",
"chars": 5318,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/type-switcher/type-switcher.component.html",
"chars": 292,
"preview": "<ul>\n <li *ngFor=\"let item of navItems\"\n class=\"nav-item\"\n [class.active]=\"item.type === iconsType\"\n (cl"
},
{
"path": "src/app/@theme/components/type-switcher/type-switcher.component.scss",
"chars": 1195,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/components/type-switcher/type-switcher.component.ts",
"chars": 839,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/pipes/eva-icons.pipe.ts",
"chars": 1335,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/services/analytics.service.ts",
"chars": 762,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/services/dialog-state.service.ts",
"chars": 563,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/services/index.ts",
"chars": 419,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/services/version.service.ts",
"chars": 333,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/styles/_raleway.scss",
"chars": 625,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/styles/styles.scss",
"chars": 376,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/styles/themes.scss",
"chars": 1697,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/@theme/theme.module.ts",
"chars": 2631,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/app.component.html",
"chars": 316,
"preview": "<nb-layout [class.blur]=\"isOpenDialog\" [withScroll]=\"true\">\n <nb-layout-header>\n <eva-header></eva-header>\n </nb-la"
},
{
"path": "src/app/app.component.scss",
"chars": 1917,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/app.component.ts",
"chars": 658,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/app/app.module.ts",
"chars": 1150,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "src/assets/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "src/browserslist",
"chars": 375,
"preview": "# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers\n# For additional inf"
},
{
"path": "src/environments/environment.prod.ts",
"chars": 52,
"preview": "export const environment = {\n production: true,\n};\n"
},
{
"path": "src/environments/environment.ts",
"chars": 276,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build ---prod` replaces `environ"
},
{
"path": "src/index.html",
"chars": 1608,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <script>\n dataLayer = [];\n </script>\n <meta charset=\"utf-8\">\n <title>Eva"
},
{
"path": "src/karma.conf.js",
"chars": 964,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "src/main.ts",
"chars": 372,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "src/polyfills.ts",
"chars": 3194,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "src/test.ts",
"chars": 644,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/dist/"
},
{
"path": "src/tsconfig.app.json",
"chars": 513,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/app\",\n \"module\": \"es2015\",\n \"b"
},
{
"path": "src/tsconfig.spec.json",
"chars": 324,
"preview": "{\n \"extends\": \"../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"../out-tsc/spec\",\n \"baseUrl\": \"./\",\n \"mod"
},
{
"path": "src/typings.d.ts",
"chars": 289,
"preview": "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the proje"
},
{
"path": "test.html",
"chars": 514,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<title></title>\n<link rel=\"stylesheet\" href=\"package-build/style/eva-icons.css\">\n<scrip"
},
{
"path": "tsconfig.json",
"chars": 430,
"preview": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"sourceMap\": true,\n \"declarati"
},
{
"path": "tslint.json",
"chars": 2808,
"preview": "{\n \"rulesDirectory\": [\n \"node_modules/codelyzer\"\n ],\n \"rules\": {\n \"trailing-comma\": [\n true,\n {\n "
},
{
"path": "webpack.config.js",
"chars": 1174,
"preview": "const path = require('path');\nconst UglifyJsPlugin = require('uglifyjs-webpack-plugin');\n\nconsole.log(path.join(__dirnam"
}
]
// ... and 2 more files (download for full content)
About this extraction
This page contains the full source code of the akveo/eva-icons GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 96 files (140.2 KB), approximately 41.6k tokens, and a symbol index with 106 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.