Vue-cli-plugin-svg-sprite-loader NPM

vue-cli-plugin-svg-sprite-loader

vuecli3 svg-sprite-loader 插件，让你轻松使用svg图标

安装

vue add svg-sprite-loader

使用

<SvgIcon name="vue" />

组件参数

参数	描述	类型
name	svg图标文件名(必填)	String
size	大小(支持rem，比如直接写12rem)	Number or String
color	颜色(单色图标才有效且path不能有fill属性)	String
width	svg宽度	String
height	svg高度	String

svg-sprite-loader 插件参数自定义

在vue.config.js：

module.exports = {
  pluginOptions: {
    svgSpriteLoader: {
      // directory
      dir: path.resolve(__dirname, 'src/icon'),
      // test rule
      test: /\.svg$/,
      // https://github.com/JetBrains/svg-sprite-loader#configuration
      options: {
        symbolId: 'icon-[name]'
      }
    }
  }
}