vue使用svg

友情链接：https://www.jianshu.com/p/15f9e3a5e00d

<meta charset="utf-8">

终端安装 npm

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

自定义组件

image

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在src新建icons 文件夹 及icons文件夹下svg文件夹、index.js文件， index.js文件内容如下

image

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件

// register globally 全局注册
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./svg', false, /\.svg$/)
// （创建了）一个包含了 svg 文件夹（不包含子目录）下面的、所有文件名以 `.suv` 结尾的、能被 require 请求到的文件的上下文。
// 这个是webpack提供的require方法，可以创建上下文环境。相当于将svg目录下的svg文件require进来。
requireAll(req)

在main.js 需要引用

image

在某个页面.vue 用法

 <svg-icon icon-class="login-mall"></svg-icon>

重要！！！！！！！！

还需要配置svg环境

在根目录创建vue.config.js

// vue.config.js
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    // 一个规则里的 基础Loader
    // svg是个基础loader
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

这样就成功了 O(∩_∩)O

作者：7级先生
链接：https://www.jianshu.com/p/15f9e3a5e00d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。