SvgIcon svg-icon

<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

 

 用法

    <el-input type="text" auto-complete="off" placeholder="账号">
        <svg-icon slot="prefix" icon-class="user"/>
    </el-input>

配置
1.开发依赖安装svg-sprite-loader

npm install svg-sprite-loader -D 

2.components中引入SvgIcon

在components路径下新建svg/svgIcon.vue

代码如下：

    <template>
      <div
        v-if="isExternal"
        :style="styleExternalIcon"
        class="svg-external-icon svg-icon"
        v-on="$listeners"
      />
      <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName" />
      </svg>
    </template>
     
    <script>
    import { isExternal } from '@/utils/validate'
     
    export default {
      name: 'SvgIcon',
      props: {
        iconClass: {
          type: String,
          required: true,
        },
        className: {
          type: String,
          default: '',
        },
      },
      computed: {
        isExternal() {
          return isExternal(this.iconClass)
        },
        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 lang="stylus" scoped>
    .svg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor; /*  currentColor 表示一个变量，若未赋值color，则继承父级color */
      overflow: hidden;
    }
     
    .svg-external-icon {
      background-color: currentColor;
      mask-size: cover !important;
      display: inline-block;
    }
    </style>
 

3.增加src/icons/index.js

import Vue from 'vue'
import SvgIcon from '@/components/svg/svgIcon' // svg组件
 
// 注册到全局
Vue.component('svg-icon', SvgIcon)
 
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
 

svgo.yml代码如下：

    # replace default config
     
    # multipass: true
    # full: true
     
    plugins:
     
      # - name
      #
      # or:
      # - name: false
      # - name: true
      #
      # or:
      # - name:
      #     param1: 1
      #     param2: 2
     
    - removeAttrs:
        attrs:
          - 'fill'
          - 'fill-rule'

4.修改 vue.config.js（没有就增加这个文件）

    const path = require('path')
    function resolve (dir) {
      return path.join(__dirname, dir)
    }
    module.exports = {
      chainWebpack (config) {
        // set svg-sprite-loader
        config.module
          .rule('svg')
          .exclude.add(resolve('src/assets/icons'))
          .end()
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(resolve('src/assets/icons'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end()
      }
    }

5.main.js中

import '@/assets/icons' // icon

 
————————————————
https://blog.csdn.net/DW14687/article/details/124841186

https://blog.csdn.net/qq_41072190/article/details/123395020

https://blog.csdn.net/weixin_45774042/article/details/126593567