Vue项目使用svg图标(并使svg图标如icon一样可修改font-size、color)

Z时代
2024-01-10
分类：综合

vue

先提一下修改颜色原理：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()
  }
}

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\')

在组件中使用,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>

上面有一段修改修改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>