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

原文：https://www.cnblogs.com/lhx9527/p/14201863.html

先提一下修改颜色原理：svg适量矢量图的线条颜色通过stroke：xxx控制，删除.svg文件的原生stroke属性，便可继承包装组件通过prop传进去的新stroke值

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()
  }
}

 

  1. 根据下图目录结构添加修改项目

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

 

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

 

  1. 上面有一段修改修改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 图标


      #

 

    1. 点击我的项目


      #

 

    1. 点击批量操作


      #

 

    1. 点击批量去色


      #
posted @ 2021-02-09 15:15  Tozhang  阅读(865)  评论(0)  编辑  收藏  举报