vue-svg-iconx
v1.0.1
Published
Svg icon component based on vue
Downloads
5
Readme
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 = require("path");
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack(config) {
config.module
.rule("svg")
.exclude.add(resolve("src/assets/icon")) // This is your svg icon directory.
.end();
config.module
.rule("svg-icon")
.test(/\.(svg)(\?.*)?$/)
.include.add(resolve("src/assets/icon")) // This is your svg icon directory.
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]" // This is your icon prefix
})
.end()
.use("svgo-loader")
.loader("svgo-loader")
.options({
externalConfig: resolve("svgo.yml") // svgo config file
})
.end();
}
};
svgo.yml
plugins:
- cleanupAttrs: true
- removeDoctype: true
- removeComments: true
- removeTitle: true
- removeDesc: true
OK, Let`s start!
import iconx from "vue-svg-iconx";
// Import all svg, svg-sprite-loader and svgo-loader will automatically handle them for you
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(require.context("@/assets/icon", false, /\.svg$/));
Vue.use(iconx);
<template>
<div>
<iconx name="loading"></iconx>
Support rotate
<iconx rotate name="loading" color="#000" size="100px"></iconx>
</div>
</template>
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:
<icon name="loading" size="50px"></icon> -> <svg style="font-size: 50px">...</svg> -------------------------------------------------------- <icon name="loading" :size="['50px']"></icon> -> <svg style="width: 50px; height: 50px">...</svg> -------------------------------------------------------- <icon name="loading" :size="['50px', '60px']"></icon> -> <svg style="width: 50px; height: 60px">...</svg>
rotate
<Boolean>
required: No
Customizable
Support for custom component names and global icon prefixes when registering.
import iconx from "vue-svg-iconx";
Vue.use(iconx, {
componentName: "icon" // default: iconx
prefix: 'iconx-' // default: icon-
});