vue-svg-iconx
Svg icon component based on vue
Install
npm i vue-svg-iconx
npm i svg-sprite-loader svgo svgo-loader -D
How to use
webpack config (use vue-cli 3)
You need a directory to store your SVG icon files. For example:
src/assets/icon
You may need to give your icon a prefix. For example:
icon-
You can change them to whatever value you want
vue.config.js
const path = ; { return path;} moduleexports = { configmodule exclude // This is your svg icon directory. ; configmodule include // This is your svg icon directory. options symbolId: "icon-[name]" // This is your icon prefix options externalConfig: // svgo config file ; };
svgo.yml
plugins: - cleanupAttrs: true - removeDoctype: true - removeComments: true - removeTitle: true - removeDesc: true
OK, Let`s start!
; // Import all svg, svg-sprite-loader and svgo-loader will automatically handle them for youconst requireAll = requireContext;; Vue;
Support rotate
Component props
-
name
<String>
required: Yes.
The value of name is equal to the file name of the svg you want to display.
-
color
<String>
required: No
-
size
<String, Array>
required: No
example:
->...--------------------------------------------------------->...--------------------------------------------------------->... -
rotate
<Boolean>
required: No
Customizable
Support for custom component names and global icon prefixes when registering.
; Vue;