vue-svgicon基本使用

安装插件

# 电脑首次使用，需安装全局环境
npm i vue-svgicon -g
# 安装vue-svgicon，便于使用iconfont(阿里巴巴矢量图标库)
npm i vue-svgicon -s

-g,全局安装
-s<=>–save ,局部安装，保存至package.js配置文件中的dependencies字段；开发环境和生产环境都会被打包应用到，多是一些项目中运用到的框架。
-d<=>–save-dev,局部安装，保存至package.js配置文件中的devDependencies字段；只有开发环境才能使用，并不会参与到打包到生产环境中，多是开发环境的依赖包，比如打包工具，eslint检查工具等。
参考文档：npm 包管理命令 -d -s -g的区别 2020-11-20

配置 Command

package.json中配置svg图标解析和输出路径

{"script": {
    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components"
}}

而后便可以使用下列命令，自动将svg图标解析为js

npm run svg

使用插件

在main.js中引入svgIcon组件，并且全局注册

import SvgIcon from 'vue-svgicon'

// 注册svgIcon插件
Vue.use(SvgIcon,{
  tagname: "svg-icon",// 图标组件名称
  defaultWidth:'1em', // 默认宽
  defaultWidth:'1em'  // 默认高
})

---

怎么说呢，人类的本质是复读机，而我是搬运工～
参考文档：
vue-svgicon基本使用
vue中svg图片处理插件vue-svgicon使用教程
vue-svgicon官方说明