关于vue-svg-icon的使用方式

Posted 2020-11-16 free-thinker

前言

工作中用到svg格式的图标，既然是svg，当然不想用古老的img方式引用，希望能凭借定义svg的fill属性，随意定义图标的颜色；同时不想将整段svg代码写入组建内，于是找到了使用vue-svg-icon来实现这个功能。
项目参考链接：https://www.npmjs.com/package/vue2-svg-icon

1. 安装

$ npm install vue-svg-icon --save-dev

安装之后，可以在node_modules／vue-svg-icon目录下找到相关文件

2. 将 svg 图片放入 src/svg

• src 文件夹和node_modules在同一个文件夹下

3. 引入 vue-svg-icon

• 大部分看到的教程里都说在 项目的 main.js 入口引入 vue-svg-icon 和需要使用的 svg 文件（不需要扩展名）

import Icon from ‘vue-svg-icon/Icon.vue‘
Vue.component(‘icon‘, Icon)
Icon.inject(‘wechat‘) // SVG图片名字（无扩展名）

• 不过我按照上述方式会报错，不能正常显示。于是只在调用svg的组件内，引入 vue-svg-icon

import Icon from ‘vue-svg-icon/Icon.vue‘
export default {
  components: {
    Icon
  }
}

4. 使用icon标签

然后在引入 vue-svg-icon，调用svg的组件内，使用 icon标签就可以了～

<icon name="wechat" scale="20"></icon>

以上是关于关于vue-svg-icon的使用方式的主要内容，如果未能解决你的问题，请参考以下文章

关于js----------------分享前端开发常用代码片段

关于片段生命周期

几个关于js数组方法reduce的经典片段

关于在各浏览器中插入音频文件的html代码片段

几个关于js数组方法reduce的经典片段

springcloud报错-------关于 hystrix 的异常 FallbackDefinitionException:fallback method wasn't found(代码片段