# vue-symbol-icon A Vue **SVG Symbol icon** component for using **SVG sprites icons**. Easy to customize SVG icon 's `color` and `size`!!! > TIPS: `vue-symbol-icon` needs to be used in conjunction with `svg-sprite-loader` . So, please pre-install [svg-sprite-loader](https://github.com/JetBrains/svg-sprite-loader) and config it. Or use SVG symbols generated by other way. > The current version requires `Vue 3`. # Features - Using to display **SVG symbols** as icons. - Ability to manipulate SVG icons. e.g. using `font-size` and `color`. - Support [Iconfont SVG symbol icons](https://www.iconfont.cn/). | Version | Support Vue Version | Docs | | :---: | :---: | :---: | | `v2` | `v2` | [2.x](https://github.com/yisibell/vue-symbol-icon/tree/2.x) | | `v3` | `v3` | [main](https://github.com/yisibell/vue-symbol-icon) | # Installation ``` bash # pnpm $ pnpm add vue-symbol-icon@next # yarn $ yarn add vue-symbol-icon@next # npm $ npm i vue-symbol-icon@next ``` # Usage ``` vue ``` In `v2.x` and above, you can use `vue-symbol-icon` as a global component via vue plugin: ```js import Vue from 'vue' import SvgIcon from 'vue-symbol-icon' Vue.use(SvgIcon) ``` Or, Local registration: ```js import { SvgIcon } from 'vue-symbol-icon' export default { components: { SvgIcon } } ``` # Plugin options | Key | Type | Default value | Description | | :---: | :---: | :---: | :---: | | `globalComponentName`
(Added in `v2.1.0`) | `string` | `SvgIcon` | Define the global component name. | | `symbolIdPrefix`
(Added in `v2.1.0`) | `string` | `icon-` | Set SVG **symbol id prefix** in global. | # Component properties | Prop name | Default value | Description | Type | Added in | | :---: | :---: | :---: | :---: | :---: | | `name` | `undefined` | SVG **symbol name** which is SVG filename in the SVG folder. | `string` | `v1.2.0` | | `symbolIdPrefix` | `undefined` | SVG **symbol id prefix**. | `string` | `v1.2.0` | | `iconClass` | `undefined` | alias of `name` | `string` | `v1.1.0` | | `className` | `undefined` | Add Extra class name to SVG Element | `string` | `v1.1.0` | | `color` | `undefined` | Define SVG color | `string` | `v1.1.0` | | `fontSize` | `undefined` | Define SVG size | `string/number` | `v1.1.0` | | `size` | `undefined` | Alias of `fontSize` | `string/number` | `v2.2.0` | | `width` | `undefined` | Alias of `fontSize` | `string/number` | `v2.2.0` | :warning: TIPS, `name` and `symbolIdPrefix` form the **Symbol id**. Global plugin configuration has lower priority than component properties. ```vue ``` It's look like: ```html ``` # How to config **svg-sprite-loader** ? ## In `Vue CLI` 1. First, you need config `webpack` with `chainWebpack`: ``` js // vue.config.js const path = require('path') function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { // ... chainWebpack(config) { // Change the configuration of url-loader so that it does not process svg files used as icons in the specified folder config.module .rule("svg") .exclude.add(resolve("src/icons/svg")) .end(); // Add svg-sprite-loader to process svg files in the specified folder config.module .rule("icons") .test(/\.svg$/) .include.add(resolve("src/icons/svg")) .end() .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "icon-[name]" }) .end(); } } ``` 2. Then, place your `.svg` icon files in the `src/icons/svg` folder. 3. Defines the **entry point** for batch importing `.svg` modules: ``` js // src/icons/index.js import SvgIcon from 'vue-symbol-icon' // svg component // 2. require svg files const req = require.context('./svg', false, /\.svg$/) const requireAll = requireContext => requireContext.keys().forEach(requireContext) requireAll(req) export const installIcons = (app) => { app.use(SvgIcon) } ``` 4. Finally, these `.svg` files are centrally imported in the project entry file `main.js`. ``` js import { createApp } from 'vue' import App from './App.vue' import { installIcons } from '@/icons' const app = createApp(App) installIcons(app) app.mount('#app') ``` ## In Nuxt2 Please use [nuxt-symbol-icons](https://github.com/yisibell/nuxt-symbol-icons) module. more details see it's docs. # CHANGE LOG CHANGE LOG.