├── .browserslistrc ├── babel.config.js ├── .postcssrc.js ├── tests └── unit │ ├── .eslintrc.js │ └── EvaIcon.spec.js ├── docs ├── favicon.ico ├── index.html ├── css │ └── app.fa194167.css └── js │ ├── app.acabd886.js │ └── app.acabd886.js.map ├── public ├── favicon.ico └── index.html ├── src ├── assets │ ├── hero.png │ └── vfc-logo.svg ├── components │ ├── index.js │ ├── ui │ │ ├── ButtonGroup.vue │ │ └── Button.vue │ └── EvaIcon.vue ├── main.js └── App.vue ├── vue.config.js ├── .editorconfig ├── .gitignore ├── .eslintrc.js ├── jest.config.js ├── LICENSE ├── package.json ├── README.md └── .github └── COMMIT_CONVENTION.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonreshetov/vue-eva-icons/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonreshetov/vue-eva-icons/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/antonreshetov/vue-eva-icons/HEAD/src/assets/hero.png -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const isProd = process.env.NODE_ENV === 'production' 2 | 3 | module.exports = { 4 | baseUrl: isProd ? '/vue-eva-icons/' : '/' 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import EvaIcon from './EvaIcon.vue' 2 | 3 | export default { 4 | install (Vue, options) { 5 | Vue.component(EvaIcon.name, EvaIcon) 6 | } 7 | } 8 | 9 | export { EvaIcon } 10 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import EvaIcon from './components' 4 | 5 | Vue.config.productionTip = false 6 | 7 | Vue.use(EvaIcon) 8 | 9 | new Vue({ 10 | render: h => h(App) 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /src/assets/vfc-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/recommended', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | 'vue/component-name-in-template-casing': ['error', 'kebab-case'] 14 | }, 15 | parserOptions: { 16 | parser: 'babel-eslint' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/ui/ButtonGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'js', 4 | 'jsx', 5 | 'json', 6 | 'vue' 7 | ], 8 | transform: { 9 | '^.+\\.vue$': 'vue-jest', 10 | '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', 11 | '^.+\\.jsx?$': 'babel-jest' 12 | }, 13 | moduleNameMapper: { 14 | '^@/(.*)$': '/src/$1' 15 | }, 16 | snapshotSerializers: [ 17 | 'jest-serializer-vue' 18 | ], 19 | testMatch: [ 20 | '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' 21 | ], 22 | testURL: 'http://localhost/' 23 | } 24 | -------------------------------------------------------------------------------- /src/components/ui/Button.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 35 | 36 | 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-present, Anton Reshetov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /src/components/EvaIcon.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 59 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vue Eva Icons 9 | 10 | 11 | 17 |
18 | 19 | <% if (process.env.NODE_ENV === 'production') { %> 20 | 44 | <% } %> 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Vue Eva Icons
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-eva-icons", 3 | "description": "Simply beautiful open source icons as Vue components", 4 | "version": "1.1.0", 5 | "private": false, 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/antonreshetov/vue-eva-icons.git" 9 | }, 10 | "keywords": [ 11 | "vue", 12 | "vuejs", 13 | "vue-component", 14 | "vue-icons", 15 | "components", 16 | "icons" 17 | ], 18 | "main": "dist/vue-eva.common.js", 19 | "license": "MIT", 20 | "author": "Anton Reshetov", 21 | "scripts": { 22 | "serve": "vue-cli-service serve", 23 | "build": "npm run test:unit && vue-cli-service build --target lib --name vue-eva ./src/components/index.js", 24 | "build:docs": "vue-cli-service build --dest docs", 25 | "lint": "vue-cli-service lint", 26 | "test:unit": "vue-cli-service test:unit" 27 | }, 28 | "dependencies": { 29 | "eva-icons": "^1.1.0", 30 | "vue": "^2.5.17" 31 | }, 32 | "devDependencies": { 33 | "@vue/cli-plugin-babel": "^3.0.0", 34 | "@vue/cli-plugin-eslint": "^3.0.0", 35 | "@vue/cli-plugin-unit-jest": "^3.1.1", 36 | "@vue/cli-service": "^3.0.0", 37 | "@vue/eslint-config-standard": "^4.0.0", 38 | "@vue/test-utils": "^1.0.0-beta.20", 39 | "babel-core": "7.0.0-bridge.0", 40 | "babel-eslint": "^10.0.1", 41 | "babel-jest": "^23.6.0", 42 | "eslint": "^5.8.0", 43 | "eslint-plugin-vue": "^5.0.0-0", 44 | "lint-staged": "^8.1.0", 45 | "node-sass": "^4.10.0", 46 | "sass-loader": "^7.1.0", 47 | "vue-template-compiler": "^2.5.17" 48 | }, 49 | "gitHooks": { 50 | "pre-commit": "lint-staged" 51 | }, 52 | "lint-staged": { 53 | "*.js": [ 54 | "vue-cli-service lint", 55 | "git add" 56 | ], 57 | "*.vue": [ 58 | "vue-cli-service lint", 59 | "git add" 60 | ] 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /tests/unit/EvaIcon.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import { EvaIcon } from '../../src/components' 3 | 4 | const baseProps = { 5 | name: 'github', 6 | animation: 'pulse', 7 | width: '20', 8 | height: '20', 9 | fill: 'limegreen' 10 | } 11 | 12 | describe('EvaIcon', () => { 13 | it('is rendered with props', () => { 14 | const wrapper = shallowMount(EvaIcon, { 15 | propsData: baseProps 16 | }) 17 | expect(wrapper.exists()).toBe(true) 18 | expect(wrapper.props().name).toBe('github') 19 | expect(wrapper.props().width).toBe('20') 20 | expect(wrapper.props().height).toBe('20') 21 | expect(wrapper.props().fill).toBe('limegreen') 22 | }) 23 | it('is rendered as github icon', () => { 24 | const wrapper = shallowMount(EvaIcon, { 25 | propsData: baseProps 26 | }) 27 | const svgPath = wrapper.find('path') 28 | expect(svgPath.attributes()['data-name']).toBe('github') 29 | }) 30 | it('is rendered with dimensions', () => { 31 | const wrapper = shallowMount(EvaIcon, { 32 | propsData: baseProps 33 | }) 34 | const svg = wrapper.find('svg') 35 | expect(svg.attributes().width).toBe('20') 36 | expect(svg.attributes().height).toBe('20') 37 | }) 38 | it('is rendered with color', () => { 39 | const wrapper = shallowMount(EvaIcon, { 40 | propsData: baseProps 41 | }) 42 | const svg = wrapper.find('svg') 43 | expect(svg.attributes().fill).toBe('limegreen') 44 | }) 45 | it('is rendered with animations', () => { 46 | const wrapper = shallowMount(EvaIcon, { 47 | propsData: baseProps 48 | }) 49 | const svg = wrapper.find('svg') 50 | const animationClass = `eva-icon-hover-${wrapper.props().animation}` 51 | expect(svg.attributes().class).toContain(animationClass) 52 | }) 53 | it('click event is emitted', () => { 54 | const wrapper = shallowMount(EvaIcon) 55 | const svg = wrapper.find('svg') 56 | svg.trigger('click') 57 | expect(wrapper.emitted().click).toBeTruthy() 58 | }) 59 | }) 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Eva Icons 2 | 3 | logo of vue-awesome repository 4 | 5 | Is a pack of more than 480 beautiful open source [eva icons](https://akveo.github.io/eva-icons) as Vue components 6 | 7 | ## Demo 8 | 9 | [https://antonreshetov.github.io/vue-eva-icons](https://antonreshetov.github.io/vue-eva-icons/) 10 | 11 | ## Install 12 | 13 | ### NPM 14 | 15 | Installing with npm is recommended and it works seamlessly with webpack. 16 | 17 | ```js 18 | npm i vue-eva-icons 19 | ``` 20 | 21 | ### Download 22 | 23 | You can download latest version from the Github: [Download](https://github.com/antonreshetov/vue-eva-icons) 24 | 25 | ## Quick start 26 | 27 | ### Global 28 | 29 | To use in your project, just import vue-eva-icons and install into Vue. 30 | 31 | main.js 32 | 33 | ```js 34 | import Vue from 'vue' 35 | import App from './App.vue' 36 | import EvaIcons from 'vue-eva-icons' 37 | 38 | Vue.use(EvaIcons) 39 | 40 | new Vue({ 41 | render: h => h(App) 42 | }).$mount('#app') 43 | ``` 44 | 45 | App.vue 46 | 47 | ```html 48 | 51 | ``` 52 | 53 | ### On demand 54 | 55 | ```html 56 | 59 | 60 | 69 | ``` 70 | 71 | ## Props 72 | 73 | | Name | Description | Type | Accepted values | 74 | | ----------- | ------------------ | -------- | ------------------------ | 75 | | `name` | Icon name | `string` | - | 76 | | `width` | Width of icon | `string` | - | 77 | | `height` | Height of icon | `string` | - | 78 | | `fill` | Fill color of icon | `string` | HEX or color name | 79 | | `animation` | Type of animation | `string` | zoom, pulse, shake, flip | 80 | 81 | ## Events 82 | 83 | | Name | Description | Payload | 84 | | ------- | ------------------------------- | ------- | 85 | | `click` | Triggered when icon was clicked | - | 86 | -------------------------------------------------------------------------------- /.github/COMMIT_CONVENTION.md: -------------------------------------------------------------------------------- 1 | ## Git Commit Message Convention 2 | 3 | > This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular). 4 | 5 | #### TL;DR: 6 | 7 | Messages must be matched by the following regex: 8 | 9 | ```js 10 | ;/^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/ 11 | ``` 12 | 13 | #### Examples 14 | 15 | Appears under "Features" header, `compiler` subheader: 16 | 17 | ``` 18 | feat(compiler): add 'comments' option 19 | ``` 20 | 21 | Appears under "Bug Fixes" header, `v-model` subheader, with a link to issue #28: 22 | 23 | ``` 24 | fix(v-model): handle events on blur 25 | 26 | close #28 27 | ``` 28 | 29 | Appears under "Performance Improvements" header, and under "Breaking Changes" with the breaking change explanation: 30 | 31 | ``` 32 | perf(core): improve vdom diffing by removing 'foo' option 33 | 34 | BREAKING CHANGE: The 'foo' option has been removed. 35 | ``` 36 | 37 | The following commit and commit `667ecc1` do not appear in the changelog if they are under the same release. If not, the revert commit appears under the "Reverts" header. 38 | 39 | ``` 40 | revert: feat(compiler): add 'comments' option 41 | 42 | This reverts commit 667ecc1654a317a13331b17617d973392f415f02. 43 | ``` 44 | 45 | ### Full Message Format 46 | 47 | A commit message consists of a **header**, **body** and **footer**. The header has a **type**, **scope** and **subject**: 48 | 49 | ``` 50 | (): 51 | 52 | 53 | 54 |