Vue项目中使用svg图标

Posted 2020-11-16 free-thinker

svg的图片有着颜色自定义大小自定义的优势。在阿里图标库可以下载svg图片。
那么在vue框架中我们该怎么使用svg图片呢
这个时候就用到了 webpack 插件 svg-sprite-loader

首先呢自然就是安装了

npm i svg-sprite-loader --save


创建svg文件目录/src/icons/svg 里面呢放置所有svg文件 还有/src/icons/index.js

//index.js
import Vue from ‘vue‘
import SvgIcon from ‘@/components/SvgIcon‘
/* require.context("./test", false, /.test.js$/);
    这行代码就会去 test 文件夹（不包含子目录） 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。
    更直白的说就是 我们可以通过正则匹配引入相应的文件模块。
     require.context有三个参数：
     directory：说明需要检索的目录
     useSubdirectories：是否检索子目录
     regExp: 匹配文件的正则表达式 */
// 全局注册
Vue.component(‘svg-icon‘, SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context(‘./svg‘, false, /.svg$/)
requireAll(req)


在 webpack.base.conf.js 文件中添加 rules 配置

       //webpack.base.conf.js
      {
        test: /.svg$/,
        loader: "svg-sprite-loader",
        include: [path.resolve(__dirname, ‘../src/icons/svg‘)],//包括字体图标文件
        // options: {
          //symbolId: ‘icon-[name]‘ //这个没有生效，生效的是默认的name
        // }
      }


然后修改 url-loader 配置

       //webpack.base.conf.js
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        exclude: [
          path.resolve(__dirname, ‘../src/icons/svg‘), //排除字体图标文件
        ],
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      }


创建 vue 组件 svg-icon

<!-- @/components/SvgIcon -->
<template>
    <svg :class="svgClass" aria-hidden="true" @click="$emit(‘click‘)">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>
/**
 * svg 图标组件
 * iconClass="图标名称"
 * className="风格名称"
 */
export default {
  name: ‘svg-icon‘,
  props: {
    iconClass: { type: String, required: true },
    className: { type: String }
  },
  computed: {
    iconName () {
      return `#${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>



在main.js中引入

import ‘./icons/index.js‘


这样就能在vue中使用了 具体格式如下

<svg-icon icon-class="svg文件名"/>