Vue項目使用svg圖標(並使svg圖標如icon一樣可修改font-size、color)

先提一下修改顏色原理：svg適量矢量圖的線條顏色通過stroke：xxx控制，刪除.svg文件的原生stroke屬性，便可繼承包裝組件通過prop傳進去的新stroke值

• 如不想手動給svg去色，可借用阿里巴巴圖標庫批量操作

  通過icon-font快速給圖標批量去色

1.安裝依賴

npm install svg-sprite-loader --save-dev

2.（這里使用vue-cli 4以上版本） 修改vue.config.js配置文件

const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
      port: 8000
  },
  configureWebpack: {
      name: 'icontest',
      resolve: {
          alias: {
              '@': resolve('src'),
              'views': resolve('src/views')
          }
      }
  },
  chainWebpack(config) {
      config.module
          .rule('svg')
          .exclude.add(resolve('src/icons'))
          .end()
      config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/icons'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
              symbolId: 'icon-[name]'
          })
          .end()
  }
}

3. 根據下圖目錄結構添加修改項目
   

conponents文件夾添加SvgIcon(新建index.vue)

//index.vue文件
<template>
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
        <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'
                }
            },
            styleExternalIcon() {
                return {
                    mask: `url(${this.iconClass}) no-repeat 50% 50%`,
                    '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
                }
            }
        }
    }
</script>
 
<style scoped>
    .svg-icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
 
    .svg-external-icon {
        background-color: currentColor;
        mask-size: cover!important;
        display: inline-block;
    }
</style>

新建icons文件夾 -> icons新建svg文件夾（用於放需要使用的.svg文件）、icons新建index.js文件

// index.js文件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg組件
// 注冊為全局組件
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

全局注冊：修改main.js文件

import Vue from 'vue'
import App from './App.vue'
//添加下面這一行
import '@/icons'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

4. 在組件中使用,iconClass="需要使用的svg名"（此svg文件必須放在icons/svg目錄下）

<template>
  <div class="hello">
      <svg-icon iconClass="1"/>
  </div>
</template>

<script>
      export default {
        name: 'HelloWorld',
      }
</script>

<style scoped>
      .svg-icon{
        color: blue;
      }
</style>

5. 上面有一段修改修改svg color的代碼，必須在一定條件下才能生效

.svg-icon{
  color: blue;
}

點擊一個svg文件 ,將里面的stroke:xxx 全部刪除

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M505.941333 742.826667a30.506667 30.506667 0 0 0 16.213334-26.752v-173.482667h342.528A30.976 30.976 0 0 0 896 512a30.976 30.976 0 0 0-31.317333-30.592h-342.528V307.925333a30.378667 30.378667 0 0 0-16.213334-26.752 31.914667 31.914667 0 0 0-31.786666 0.853334l-331.52 204.074666A30.464 30.464 0 0 0 128 512c0 10.538667 5.546667 20.266667 14.634667 25.898667l331.52 204.074666a32.170667 32.170667 0 0 0 31.786666 0.853334z"  /></svg>

通過icon-font快速給圖標批量去色

icon-font:阿里巴巴矢量圖標庫官網

1. 將圖片加入購物車 / 也可以導入自己的 svg 圖標

   
   
   



2. 點擊我的項目

   
   
   



3. 點擊批量操作

   
   
   



4. 點擊批量去色