适用于 Vue.js 的超棒 SVG 图标组件，内置 Font Awesome 图标 .zip

# Vue-Awesome > Awesome SVG icon component for Vue.js, with built-in Font Awesome icons. > [🇨🇳 中文版](./README.zh_CN.md) Vue-Awesome an SVG icon component for [Vue.js](https://vuejs.org/), with built-in icons courtesy of [Font Awesome](https://fontawesome.com/). Check out the demo [here](https://justineo.github.io/vue-awesome/demo/). ## Installation ### npm (Recommended) ```bash $ npm install vue-awesome ``` ### bower ```bash $ bower install vue-awesome ``` ### Manual Just download `dist/vue-awesome.js` and include it in your HTML file: ```html <script src="path/to/vue-awesome/dist/vue-awesome.js"></script> ``` ## Usage ```html <!-- basic --> <v-icon name="beer"/> <!-- with options --> <v-icon name="sync" scale="2" spin/> <v-icon name="comment" flip="horizontal"/> <v-icon name="code-branch" label="Forked Repository"/> <!-- stacked icons --> <v-icon label="No Photos"> <v-icon name="camera"/> <v-icon name="ban" scale="2" class="alert"/> </v-icon> ``` Font 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: * All icons from `solid` pack are located in `vue-awesome/icons` directory and have unprefixed `name` prop values. * 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`. You can find all available `name` values from [Font Awesome's website](https://fontawesome.com/icons) like `beer`, `file` and `camera`. ### ES Modules with NPM & vue-loader (Recommended) ```js import Vue from 'vue' /* Pick one way between the 2 following ways */ // only import the icons you use to reduce bundle size import 'vue-awesome/icons/flag' // or import all icons if you don't care about bundle size import 'vue-awesome/icons' /* Register component with one of 2 methods */ import Icon from 'vue-awesome/components/Icon' // globally (in your main .js file) Vue.component('v-icon', Icon) // or locally (in your component file) export default { components: { 'v-icon': Icon } } ``` #### ⚠️ Heads up ##### Importing the souce version If 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. For **Vue CLI 3+**, add `vue-awesome` into `transpileDependencies` in `vue.config.js` like this: ```js // vue.config.js module.exports = { transpileDependencies: [ /\bvue-awesome\b/ ] } ``` For **Vue CLI 2** with the `webpack` template, modify `build/webpack.base.conf.js` like this: ```diff { test: /\.js$/, loader: 'babel-loader', - include: [resolve('src'), resolve('test')] + include: [ + resolve('src'), + resolve('test'), + resolve('node_modules/vue-awesome') + ] } ``` If you are using bare webpack config, just do similar modifications make it work. #### Using with Nuxt.js When 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: For **Nuxt.js 2**: ```js module.exports = { // ... build: { transpile: [/^vue-awesome/] } } ``` For **Nuxt.js 1**: ```js // Don't forget to // npm i --save-dev webpack-node-externals const nodeExternals = require('webpack-node-externals') module.exports = { // ... build: { extend (config, { isServer }) { // ... if (isServer) { config.externals = [ nodeExternals({ // default value for `whitelist` is // [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i] whitelist: [/es6-promise|\.(?!(?:js|json)$).{1,5}$/i, /^vue-awesome/] }) ] } } } } ``` ##### Unit Testing with Jest Make sure to whitelist `vue-awesome` from the `transformIgnorePattern`. Add following configuation in `test/unit/jest.conf.js`: ```diff + transformIgnorePatterns: [ + '/node_modules(?![\\\\/]vue-awesome[\\\\/])/' + ], ``` *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.* ### CommonJS with NPM without ES Next support ```js var Vue = require('vue') // requiring the UMD module var Icon = require('vue-awesome') // or with vue-loader you can require the src directly var Icon = require('vue-awesome/components/Icon') // register component to use ``` ### AMD ```js require.config({ paths: { 'vue-awesome': 'path/to/vue-awesome' } }) require(['vue-awesome'], function (Icon) { // register component to use Vue.component('v-icon', Icon) }) ``` ### Global variable The component class is exposed as `window.VueAwesome`. ```js // register component to use Vue.component('v-icon', VueAwesome) ``` ### Props * `name: string` 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`. 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. If you pass `null` to this prop, the whole component will not be rendered. * `scale: number|string` Used to adjust the size of the icon. Default to `1`. * `spin: boolean` Used to specify whether the icon is spining. Default to `false`. (Can't use together with `pulse`.) * `pulse: boolean` Set the pulse effect to the icon. Default to `false`. (Can't use together with `spin`.) * `inverse: boolean` If set to `true`, the color of the icon will become `#fff`. Default to `false`. * `flip: 'vertical'|'horizontal'|'both'` Used to flip the icon. * `label: string` Set the `aria-label` for the icon if provided. * `title: string` Set the title for the icon. > The icon will have `role="presentation"` thus not accessible when neither `label` nor `title` exists. ### Misc If 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. If 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&q=is%3Aissue), please feel free to [file a new one](https://github.com/Justineo/vue-awesome/issues/new). ## Styling ### Dynamic sizing You can make the icons scale dynamically according to your `font-size` by adding the following CSS: ```css .fa-icon { width: auto; height: 1em; /* or any other relative font sizes */ /* You would have to include the following two lines to make this work in Safari */ max-width: 100%; max-height: 100%; } ``` ### Colors The 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. ## Local development ```bash $ npm i $ npm run dev ``` Open `http://localhost:8080/demo` to see the demo. ### Updating icons Don'