{"id":13424076,"url":"https://github.com/Justineo/vue-awesome","last_synced_at":"2025-03-15T18:33:47.722Z","repository":{"id":37735456,"uuid":"55218353","full_name":"Justineo/vue-awesome","owner":"Justineo","description":"Awesome SVG icon component for Vue.js, built-in with Font Awesome icons.","archived":false,"fork":false,"pushed_at":"2023-01-06T01:34:10.000Z","size":19164,"stargazers_count":2431,"open_issues_count":37,"forks_count":206,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-03-13T01:44:31.796Z","etag":null,"topics":["font-awesome","icon","svg","vue"],"latest_commit_sha":null,"homepage":"https://justineo.github.io/vue-awesome/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Justineo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-01T09:02:50.000Z","updated_at":"2025-03-13T00:22:20.000Z","dependencies_parsed_at":"2023-02-05T01:32:40.729Z","dependency_job_id":null,"html_url":"https://github.com/Justineo/vue-awesome","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Justineo%2Fvue-awesome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Justineo%2Fvue-awesome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Justineo%2Fvue-awesome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Justineo%2Fvue-awesome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Justineo","download_url":"https://codeload.github.com/Justineo/vue-awesome/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243324266,"owners_count":20273100,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font-awesome","icon","svg","vue"],"created_at":"2024-07-31T00:00:48.100Z","updated_at":"2025-03-15T18:33:44.950Z","avatar_url":"https://github.com/Justineo.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","JavaScript","Framework \u0026 Library","Motive","Usage","实用库","vue","UI组件","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins","图标","UI Components","Icons"],"readme":"# Vue-Awesome\n\n\u003e Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.\n\n\u003e [🇨🇳 中文版](./README.zh_CN.md)\n\nVue-Awesome an SVG icon component for [Vue.js](https://vuejs.org/), with built-in icons courtesy of [Font Awesome](https://fontawesome.com/).\n\nCheck out the demo [here](https://justineo.github.io/vue-awesome/demo/).\n\n## Installation\n\n### npm (Recommended)\n\n```bash\n$ npm install vue-awesome\n```\n\n### bower\n\n```bash\n$ bower install vue-awesome\n```\n\n### Manual\n\nJust download `dist/vue-awesome.js` and include it in your HTML file:\n\n```html\n\u003cscript src=\"path/to/vue-awesome/dist/vue-awesome.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```html\n\u003c!-- basic --\u003e\n\u003cv-icon name=\"beer\"/\u003e\n\n\u003c!-- with options --\u003e\n\u003cv-icon name=\"sync\" scale=\"2\" spin/\u003e\n\u003cv-icon name=\"comment\" flip=\"horizontal\"/\u003e\n\u003cv-icon name=\"code-branch\" label=\"Forked Repository\"/\u003e\n\n\u003c!-- stacked icons --\u003e\n\u003cv-icon label=\"No Photos\"\u003e\n  \u003cv-icon name=\"camera\"/\u003e\n  \u003cv-icon name=\"ban\" scale=\"2\" class=\"alert\"/\u003e\n\u003c/v-icon\u003e\n```\n\nFont Awesome 5 has separated all icons into several packs. Vue-Awesome is built upon its all free icons, which includes all free icons from 3 icon packs: `regular`, `solid` and `brands`. Since the `solid` pack has the most number of icons, we organize all Vue-Awesome icons as follows:\n\n* All icons from `solid` pack are located in `vue-awesome/icons` directory and have unprefixed `name` prop values.\n\n* Icons from `regular` and `brands` are located in `vue-awesome/icons/regular` and `vue-awesome/icons/brands`, which have prefixed `name` prop values like `regular/flag` or `brands/reddit`.\n\nYou can find all available `name` values from [Font Awesome's website](https://fontawesome.com/icons) like `beer`, `file` and `camera`.\n\n### ES Modules with NPM \u0026 vue-loader (Recommended)\n\n```js\nimport Vue from 'vue'\n\n/* Pick one way between the 2 following ways */\n\n// only import the icons you use to reduce bundle size\nimport 'vue-awesome/icons/flag'\n\n// or import all icons if you don't care about bundle size\nimport 'vue-awesome/icons'\n\n/* Register component with one of 2 methods */\n\nimport Icon from 'vue-awesome/components/Icon'\n\n// globally (in your main .js file)\nVue.component('v-icon', Icon)\n\n// or locally (in your component file)\nexport default {\n  components: {\n    'v-icon': Icon\n  }\n}\n```\n\n#### ⚠️ Heads up\n\n##### Importing the souce version\n\nIf you are using official Vue CLI to create your project and you want to use the untranspiled component (import `vue-awesome/components/Icon` rather than import `vue-awesome` directly, to optimize bundle size, which is recommended), you'll encounter the problem that the default configuration will exclude `node_modules` from files to be transpiled by Babel.\n\nFor **Vue CLI 3+**, add `vue-awesome` into `transpileDependencies` in `vue.config.js` like this:\n\n```js\n// vue.config.js\nmodule.exports = {\n  transpileDependencies: [\n    /\\bvue-awesome\\b/\n  ]\n}\n```\n\nFor **Vue CLI 2** with the `webpack` template, modify `build/webpack.base.conf.js` like this:\n\n```diff\n      {\n        test: /\\.js$/,\n        loader: 'babel-loader',\n-       include: [resolve('src'), resolve('test')]\n+       include: [\n+         resolve('src'),\n+         resolve('test'),\n+         resolve('node_modules/vue-awesome')\n+       ]\n      }\n```\n\nIf you are using bare webpack config, just do similar modifications make it work.\n\n#### Using with Nuxt.js\n\nWhen using Vue-Awesome on the server side with Nuxt.js, it may prompt `Unexpected token import` because Nuxt.js has configured an `external` option by default, which prevent files under `node_modules` from being bundled into the server bundle with only a few exceptions. We need to whitelist `vue-awesome` in `nuxt.config.js` as follows:\n\nFor **Nuxt.js 2**:\n\n```js\n\nmodule.exports = {\n  // ...\n  build: {\n    transpile: [/^vue-awesome/]\n  }\n}\n```\n\nFor **Nuxt.js 1**:\n\n```js\n// Don't forget to\n// npm i --save-dev webpack-node-externals\nconst nodeExternals = require('webpack-node-externals')\n\nmodule.exports = {\n  // ...\n  build: {\n    extend (config, { isServer }) {\n      // ...\n      if (isServer) {\n        config.externals = [\n          nodeExternals({\n            // default value for `whitelist` is\n            // [/es6-promise|\\.(?!(?:js|json)$).{1,5}$/i]\n            whitelist: [/es6-promise|\\.(?!(?:js|json)$).{1,5}$/i, /^vue-awesome/]\n          })\n        ]\n      }\n    }\n  }\n}\n```\n\n##### Unit Testing with Jest\n\nMake sure to whitelist `vue-awesome` from the `transformIgnorePattern`. Add following configuation in `test/unit/jest.conf.js`:\n\n```diff\n+ transformIgnorePatterns: [\n+   '/node_modules(?![\\\\\\\\/]vue-awesome[\\\\\\\\/])/'\n+ ],\n```\n\n*Don't import all icons if you don't want to make unit testing slow because this will transform all icons from ES module and thus slow down the test process.*\n\n### CommonJS with NPM without ES Next support\n\n```js\nvar Vue = require('vue')\n\n// requiring the UMD module\nvar Icon = require('vue-awesome')\n\n// or with vue-loader you can require the src directly\nvar Icon = require('vue-awesome/components/Icon')\n\n// register component to use\n```\n\n### AMD\n\n```js\nrequire.config({\n  paths: {\n    'vue-awesome': 'path/to/vue-awesome'\n  }\n})\n\nrequire(['vue-awesome'], function (Icon) {\n  // register component to use\n  Vue.component('v-icon', Icon)\n})\n```\n\n### Global variable\n\nThe component class is exposed as `window.VueAwesome`.\n\n```js\n// register component to use\nVue.component('v-icon', VueAwesome)\n```\n\n### Props\n\n* `name: string`\n\n  The name of the icon. It's necessary if the component isn't used as the wrapper of an icon stack. All valid names correspond to the file path relative to the `icons` directory. Notice that you may have to check the name of the icon pack after you search on FontAwesome's website. For example, you'll see a URL argument of `style=brands` on the [detail page for `500px`](https://fontawesome.com/icons/500px?style=brands) and the icon name will be `brands/500px`.\n\n  Only free icons for FontAwesome are available by default and because the `solid` style has the most icons, we've made it the default pack so the path prefixes can be omitted.\n\n  If you pass `null` to this prop, the whole component will not be rendered.\n\n* `scale: number|string`\n\n  Used to adjust the size of the icon. Default to `1`.\n\n* `spin: boolean`\n\n  Used to specify whether the icon is spining. Default to `false`. (Can't use together with `pulse`.)\n\n* `pulse: boolean`\n\n  Set the pulse effect to the icon. Default to `false`. (Can't use together with `spin`.)\n\n* `inverse: boolean`\n\n  If set to `true`, the color of the icon will become `#fff`. Default to `false`.\n\n* `flip: 'vertical'|'horizontal'|'both'`\n\n  Used to flip the icon.\n\n* `label: string`\n\n  Set the `aria-label` for the icon if provided.\n\n* `title: string`\n\n  Set the title for the icon.\n\n\u003e  The icon will have `role=\"presentation\"` thus not accessible when neither `label` nor `title` exists.\n\n### Misc\n\nIf you are using `vue-awesome/components/Icon` (instead of the whole bundled version), Vue-Awesome won't import a single icon by default. Do not forget to import icons you want to use.\n\nIf these caveats don't help and there are no proper workarounds in [earlier issues](https://github.com/Justineo/vue-awesome/issues?utf8=%E2%9C%93\u0026q=is%3Aissue), please feel free to [file a new one](https://github.com/Justineo/vue-awesome/issues/new).\n\n## Styling\n\n### Dynamic sizing\n\nYou can make the icons scale dynamically according to your `font-size` by adding the following CSS:\n\n```css\n.fa-icon {\n  width: auto;\n  height: 1em; /* or any other relative font sizes */\n\n  /* You would have to include the following two lines to make this work in Safari */\n  max-width: 100%;\n  max-height: 100%;\n}\n```\n\n### Colors\n\nThe icon color is inherited from the font color of the parent element by default. You can easily change it to any other color by specifying the `color` property.\n\n## Local development\n\n```bash\n$ npm i\n$ npm run dev\n```\n\nOpen `http://localhost:8080/demo` to see the demo.\n\n### Updating icons\n\nDon't touch files in `src/icons` but update `assets/svg/*` instead and run `npm run icons` to re-generate icon module files.\n\n## Registering custom icons\n\n### Simple case\n\nYou can register custom icons like this:\n\n```js\nimport Icon from 'vue-awesome/components/Icon'\n\nIcon.register({\n  baidu: {\n    width: 23.868,\n    height: 26,\n    d: 'M3.613 13.701c2.827-.608 2.442-3.986 2.357-4.725-.138-1.139-1.477-3.128-3.296-2.971C.386 6.21.052 9.515.052 9.515c-.309 1.528.74 4.793 3.561 4.186zm3.002 5.875c-.083.238-.268.846-.107 1.375.315 1.187 1.346 1.24 1.346 1.24h1.48v-3.619H7.749c-.713.213-1.057.767-1.134 1.004zM8.86 8.035c1.562 0 2.823-1.797 2.823-4.019C11.683 1.796 10.421 0 8.86 0 7.301 0 6.036 1.796 6.036 4.016c0 2.222 1.265 4.019 2.824 4.019zm6.724.265c2.087.271 3.429-1.956 3.695-3.644.272-1.686-1.074-3.644-2.552-3.98-1.48-.339-3.329 2.032-3.497 3.578-.2 1.89.271 3.778 2.354 4.046zm5.114 9.923s-3.229-2.498-5.113-5.198c-2.555-3.981-6.185-2.361-7.399-.337-1.209 2.024-3.093 3.305-3.36 3.644-.271.334-3.9 2.293-3.095 5.871.806 3.576 3.635 3.508 3.635 3.508s2.085.205 4.504-.336c2.42-.537 4.503.134 4.503.134s5.652 1.893 7.199-1.751c1.545-3.645-.874-5.535-.874-5.535zm-9.671 5.423H7.352c-1.587-.316-2.219-1.4-2.299-1.584-.078-.188-.528-1.059-.29-2.539.686-2.219 2.642-2.379 2.642-2.379h1.956V14.74l1.666.025v8.881zm6.844-.025h-4.229c-1.639-.423-1.716-1.587-1.716-1.587v-4.677l1.716-.027v4.203c.104.447.661.529.661.529h1.742v-4.705h1.825v6.264zm5.986-12.486c0-.808-.671-3.239-3.159-3.239-2.492 0-2.825 2.295-2.825 3.917 0 1.548.131 3.71 3.227 3.641 3.096-.068 2.757-3.507 2.757-4.319z'\n  }\n})\n```\n\n### More advanced cases\n\nIf your SVG file has more than one path or polygon, and/or you want to have a predefined style, you can register like this:\n\n#### Paths\n\n```js\nimport Icon from 'vue-awesome/components/Icon'\n\nIcon.register({\n  webpack: {\n    width: 1200,\n    height: 1200,\n    paths: [\n      {\n        style: 'fill:#8ED6FB',\n        d: 'M1035.6 879.3l-418.1 236.5V931.6L878 788.3l157.6 91zm28.6-25.9V358.8l-153 88.3V765l153 88.4zm-901.5 25.9l418.1 236.5V931.6L320.3 788.3l-157.6 91zm-28.6-25.9V358.8l153 88.3V765l-153 88.4zM152 326.8L580.8 84.2v178.1L306.1 413.4l-2.1 1.2-152-87.8zm894.3 0L617.5 84.2v178.1l274.7 151.1 2.1 1.2 152-87.8z'\n      },\n      {\n        style: 'fill:#1C78C0',\n        d: 'M580.8 889.7l-257-141.3v-280l257 148.4v272.9zm36.7 0l257-141.3v-280l-257 148.4v272.9zm-18.3-283.6zM341.2 436l258-141.9 258 141.9-258 149-258-149z'\n      }\n    ]\n  }\n})\n```\n\n#### Polygons\n\n```js\nimport Icon from 'vue-awesome/components/Icon'\n\nIcon.register({\n  vue: {\n    width: 256,\n    height: 221,\n    polygons: [\n      {\n        style: 'fill:#41B883',\n        points: '0,0 128,220.8 256,0 204.8,0 128,132.48 50.56,0 0,0'\n      },\n      {\n        style: 'fill:#35495E',\n        points: '50.56,0 128,133.12 204.8,0 157.44,0 128,51.2 97.92,0 50.56,0'\n      }\n    ]\n  }\n})\n```\n\n#### Raw SVG\n\n**If you are using Vue.js version prior to `2.6.0`, you need to include [innersvg-polyfill](https://www.npmjs.com/package/svg-innerhtml) before you use this feature.**\n\n```js\nimport Icon from 'vue-awesome/components/Icon'\n\nIcon.register({\n  'html5-c': {\n    width: 512,\n    height: 512,\n    raw: '\u003cpath fill=\"#E34F26\" d=\"M71,460 L30,0 481,0 440,460 255,512\"/\u003e\u003cpath fill=\"#EF652A\" d=\"M256,472 L405,431 440,37 256,37\"/\u003e\u003cpath fill=\"#EBEBEB\" d=\"M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z\"/\u003e\u003cpath fill=\"#FFF\" d=\"M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z\"/\u003e'\n  }\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJustineo%2Fvue-awesome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJustineo%2Fvue-awesome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJustineo%2Fvue-awesome/lists"}