项目中使用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"可以用来单独设置样式