vue 导入 iconfont 中的 svg 图标
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:- 支持多色图标了,不再受单色限制。- 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 兼容性较差,支持 ie9+,及现代浏览器。- 浏览器渲染svg的性能一般,还不如png。
·
博客地址:http://www.globm.top/blog/1/detail/42
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其
实是做了一个svg的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用
- 打开iconfont,找到我的项目,点击 批量操作-全选-批量去色
- 选择Symbol,打开链接下载js文件
- 将下载的js文件保存在assects静态文件中,并在main.js引入
//main.js
import '@/assets/js/font_symbol.js'
- 新建svgIcon.vue,将svg的导入封装起来
//svgIcon.vue
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName () {
return `#${this.iconClass}`
},
svgClass () {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 新建svg-icon.js全局注册,并导入main.js
//svg-icon.js
import Vue from 'vue'
import SvgIcon from '@/common/SvgIcon.vue' // svg组件
Vue.component('svg-icon', SvgIcon)// 全局注册
//main.js
import '@/assets/js/svg-icon.js'
- ok,写到这里就大功告成了,可以在页面中直接通过标签对来调用了
<svg-icon icon-class="icon图标名称" />
- 最后,我看到网上有很多导入svg的方法,需要在vue.config.js中进行配置,这是针对那些需要直接在项目中导入svg图标的,如果你只是单纯使用iconfont的话就没必要配置了,话不多说,顺便把配置也贴一下吧
//vue.config.js
//svg-icon
// svg loader
chainWebpack: config => {
const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear(); // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(/node_modules/); // 正则匹配排除node_modules目录
svgRule // 添加svg新的loader处理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});
// 修改images loader 添加svg处理
const imagesRule = config.module.rule('images');
imagesRule.exclude.add(resolve('src/icons'));
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
}
更多推荐
已为社区贡献19条内容
所有评论(0)