项目中使用svg.icon

项目中使用svg.icon

第一步：建立如下的文件夹svgicon

其中index.vue中的配置如下

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: 'svgIcon',
  props: {
    data_iconName: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    svgClass() {
      //svg 的class
      if (this.className) {
        return `svg-icon ${this.className}`
      } else {
        return 'svg-icon'
      }
    },
    iconName() {
      //svg xlink-href 指向的文件名
      return `#icon-${this.data_iconName}`
    },
  },
}
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

其中index.js中的配置如下

import Vue from 'vue'
import svgIcon from './index.vue'
Vue.component('svg-icon', svgIcon) //挂载全局组件
//下面这个是导入svgIcon/svg下的所有svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /.svg$/)
/*    
  第一个参数是:'./svg' => 需要检索的目录，  
  第二个参数是：false => 是否检索子目录,
  第三个参数是: /.svg$/ => 匹配文件的正则
*/
requireAll(req)

在iconfont中将需要的图标的复制svg代码，并粘贴在创建在svg文件夹里的文件中，一个文件表示一个图标

在main.js中引入文件

import '@/svgicon/index.js'

文件中使用

其中data_iconName表示svg文件夹里的每一个文件名，className="fullscreen_icon"可以用来单独设置样式