阿⾥巴巴⽮量图标库项⽬中使⽤svg格式字体图标使⽤⽅式及封装1.简单上⼿应⽤
⼀、在阿⾥巴巴⽮量图标库官⽹⾥⾯创建⾃⼰的项⽬，在⾥⾯添加⾃⼰项⽬得图标。（具体如何新建项⽬添加图标不是本⽂重点可⾃⾏百度）
⼆、点击下载⾄本地
三、到下载下来的iconfont.js复制
四、引进项⽬svg运行方式有哪些
好了，到这⾥就完了看效果
需要注意的⼀个地⽅：#icon-其中icon-是你在新建项⽬的时候设置的前缀
就是上⾯框住的地⽅，当然这只是⼀个简单的demo例⼦
仔细看完你会发现重点来了
按照这样的⽅法在项⽬⾥⾯可以使⽤svg图但是有两个步骤在不断重复，这对于ui跟新图标库前端引⽤来说都是极其的不⽅便，因此就需要将其封装成组件，下⼀次需要添加的时候直接现在svg⽂件引⼊⼀个⽂件就可以了，不需要频繁替换iconfont,js，团队协作也很⽅便；
2.使⽤svg格式字体图标在vue项⽬⾥的封装
1、第⼀步：安装解析svg类型图标的依赖库
npm install svg-sprite-loader --save-dev
2、配置fig.js⽂件，代码如下我现在⽤的webpack是4.0以上版本的这⼀步配置很关键，这⾥配置失败图标是出不来的，如果有报resovle is undefined 则
chainWebpack(config) {
// set svg-sprite-loader
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
symbolId: 'icon-[name]'
})
.end()
}
  整个⽂件如下
const path = require('path')
publicPath:'./' ,
devServer: {
proxy: {
'/api':{
target: 'c.y.qq/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg',
// target: '192.168.3.20:8154/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
},
disableHostCheck: true
},
chainWebpack: config => {
<('main').add('babel-polyfill') // main是⼊⼝js⽂件
// 其他配置
.rule('svg')
.exclude.solve(__dirname,"src/icons"))
.
end()
.rule('icons')
.test(/\.svg$/)
.include.solve(__dirname,"src/icons"))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.
end()
},
lintOnSave: false,
};
  3、在src/components下新建⽂件夹及⽂件SvgIcon/index.vue，代码如下
<template>
<!--<svg class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>-->
<div v-if="isExternal" : class="svg-external-icon svg-icon" v-on="$listeners" />  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
// doc: panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.
svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>
  4、在src下新建icons⽂件夹，及icons⽂件夹下svg⽂件夹、index.js⽂件、l⽂件
index.js⽂件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
/
/ register globally
Vueponent('svg-icon', SvgIcon)
const req = t('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
# replace default config
# multipass: true
# full: true
plugins:
# - name
#
# or:
# - name: false
# - name: true
#
# or:
# - name:
#    param1: 1
#    param2: 2
- removeAttrs:
attrs:
- 'fill'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。