vue中引入.svg图标,使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍
创建SvgIcon组件
<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export default { name: ‘svg-icon‘, props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { iconName() { return `#icon-${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>
创建icons文件夹
src跟目录下创建icons文件夹,里面创建svg文件夹和index.js文件
image.png
svg文件夹中用来存放各种扩展的.svg图标。
index.js
import Vue from ‘vue‘ import SvgIcon from ‘@/components/SvgIcon‘// svg组件 // register globally Vue.component(‘svg-icon‘, SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context(‘./svg‘, false, /\.svg$/) requireAll(req)
main.js中引入
import ‘./icons‘
下载插件
cnpm i svg-sprite-loader --save
配置
在build/webpack.base.conf.js文件中,加入
{ test: /\.svg$/, loader: ‘svg-sprite-loader‘, include: [path.resolve(‘src/icons‘)], options: { symbolId: ‘icon-[name]‘ } }
并在以下设置中添加exclude: [resolve(‘src/icons‘)],
,如下所示
{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: ‘url-loader‘, exclude: [path.resolve(‘src/icons‘)], options: { limit: 10000, name: utils.assetsPath(‘img/[name].[hash:7].[ext]‘) } },
使用
ok,大功告成,这样就可以在.vue页面中直接使用.svg文件了。使用.svg文件的名称,通过icon-class
属性来引用。
<svg-icon icon-class="user" />
作者:知足常乐晨
链接:https://www.jianshu.com/p/7e65608ddc0a
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关推荐
mapaler 2020-07-17
MIKUScallion 2020-07-05
Dickzeng 2020-07-05
wallowyou 2020-06-28
hermanncain 2020-06-25
mapaler 2020-06-21
Dickzeng 2020-06-17
程序员俱乐部 2020-06-11
lanzhusiyu 2020-06-09
hermanncain 2020-05-09
Elena0 2020-04-11
Leonwey 2020-04-11
wallowyou 2020-03-05
jinxiutong 2020-02-10
jinxiutong 2020-02-03
mqbeauty 2020-01-08
mapaler 2020-01-17
Elena0 2020-01-12
mapaler 2020-01-05