vue中svg的使用，可改变icon颜色（svg-sprite-loader）

这是我参与更文挑战的第15天，活动详情查看： 更文挑战

今天来和小伙伴们分享下之前改 UI 的笔记 , 由于项目需要，要在项目中使用设计师给的 icon 图标，还要改变 icon 的颜色。

幸好找到这么一个神器~

插件：svg-sprite-loader

版本：@vue/cli 4.3.1

使用：

1. npm install -D svg-sprite-loader

2. 在 src/components/ 下创建 SvgIcon 组件 配置SvgIcon.vue

   

       <template>
         <svg :class="svgClass" aria-hidden="true">
           <use :xlink:href="iconName" />
         </svg>
       </template>
       <script>
       export default {
         name: 'SvgIcon',
         props: {
           iconClass: {
             type: String,
             required: true
           },
           className: {
             type: String,
             default: ''
           }
         },
         computed: {
           iconName () {
             return `#icon-${this.iconClass}`
           },
           svgClass () {
             if (this.className) {
               return 'svg-icon ' + this.className
             } else {
               return 'svg-icon'
             }
           }
         }
       }
       </script>
   
       <style scoped>
       .svg-icon {
         width: 1em;
         height: 1em;
         vertical-align: -0.15em;
         fill: currentColor;
         overflow: hidden;
       }
       </style>
   
   

3. 新建目录，将 svg 文件放到该目录下 src/icons/svg

   

4. 配置 index.js , 注册组件，全局使用

   import Vue from 'vue'
   import SvgIcon from '@/components/SvgIcon'// svg组件
   
   // register globally
   Vue.component('svg-icon', SvgIcon)
   
   const requireAll = requireContext => requireContext.keys().map(requireContext)
   /**
   * require.context(directory,useSubdirectories,regExp)
   * require.context():需要一次性的引入某个文件夹下的所有文件
   形参：
   directory：需要引入文件的目录
   useSubdirectories：是否查找该目录下的子级目录
   regExp：匹配引入文件的正则表达式
   */
   
   const req = require.context('./svg', false, /\.svg$/)
   requireAll(req)
   
   

5. 在 main.js 中引入 import '@/icons'

6. 在和src同级的目录下创建vue.config.js并配置如下代码, vue-cli3 开始有默认的 svg 和 images 的loader ，需要 手动排除

     const path = require('path')
   
     function resolve (dir) {
       return path.join(__dirname, './', dir)
     }
   
     module.exports = {
       chainWebpack: config => {
         const svgRule = config.module.rule('svg') // 找到svg-loader
         svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
         svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
         svgRule // 添加svg新的loader处理
           .test(/\.svg$/)
           .use('svg-sprite-loader')
           .loader('svg-sprite-loader')
           .options({
             symbolId: 'icon-[name]'
           })
   
         // 修改images loader 添加svg处理
         const imagesRule = config.module.rule('images')
         imagesRule.exclude.add(resolve('src/icons'))
         config.module
           .rule('images')
           .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
       }
     }
   

7. 在组件中使用,stroke属性就可以修改icon的颜色了 <svg-icon :icon-class=svg文件的名字如setting" :stroke="'#4bc8c8'"></svg-icon>

参考链接

www.cnblogs.com/cat-eol/p/1… www.jb51.net/article/149…

最后

这个前端真是太难了 哈哈😄

如果你觉得本篇文章还不错的话，那拜托再点点赞支持一下呀😝

让我们开始这一场意外的相遇吧！~

欢迎留言！谢谢支持！ヾ(≧▽≦*)o 冲冲冲！！

我是4ye 咱们下期很快再见！！