js 获取嵌入的svg_vue引入阿里巴巴矢量图标 svg组件形式

1.在components目录创建

<template>
<svg
:class="getClassName"
:width="width"
:height="height"
aria-hidden="true">
<use :xlink:href="getName"></use>
</svg>
</template>
<script>
export default {
name: 'icon-svg',
props: {
name: {
type: String,
required: true
},
className: {
type: String
},
width: {
type: String
},
height: {
type: String
}
},
computed: {
getName () {
return `#icon-${this.name}`
},
getClassName () {
return [
'icon-svg',
`icon-svg__${this.name}`,
this.className && /S/.test(this.className) ? `${this.className}` : ''
]
}
}
}
</script>
<style>
.icon-svg {
width: 1em;
height: 1em;
fill: currentColor;
overflow: hidden;
}
</style>

2.创建icons文件夹 里面又svg文件夹 iconfont.js index.js 里面的svg文件是从矢量图标库网站下载下来的svg代码 文件是自己的命名

index.js文件里面的内容 Vue.component('icon-svg', IconSvg) 封装的组件名称

/* 使用:
* 1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理)
* 2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名)
* 2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件
* 3. 组件模版中使用 [<icon-svg name="canyin"></icon-svg>]
*
* 注意:
* 1. 通过2-2 添加icons, getNameList方法无法返回对应数据
*/
import Vue from 'vue'
import IconSvg from '@/components/icon-svg'
import '@/icons/iconfont.js'
Vue.component('icon-svg', IconSvg)
const svgFiles = require.context('./svg', true, /.svg$/)
const iconList = svgFiles.keys().map(item => svgFiles(item))
export default {
// 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...]
getNameList () {
return iconList.map(item => item.default.id.replace('icon-', ''))
}
}

3.在main.js引入 icons 文件夹

4.使用svg