mapaler 2019-10-22
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍
<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>
src跟目录下创建icons文件夹,里面创建svg文件夹和index.js文件
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)
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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。