推荐阿里巴巴图标库
命令行运行npm install svg-sprite-loader
创建icons/svg文件夹
- 将svg文件放在该文件夹下面
在components文件夹中创建svgiconfont.vue文件
文件内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> import '@/icons' export default { name: 'svg-icon', props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { iconName() { return `#icon-${this.iconClass}` }, svgClass() { if (this.className) { console.log('svg-icon ' + this.className) return 'svg-icon ' + this.className } else { return 'svg-icon' } } }, mounted: function() { } } </script> <style scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> |
创建index.js文件
文件内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 | import Vue from 'vue' import svgiconfont from '@/components/svgiconfont'// svg组件 /* require.context有三个参数: directory:说明需要检索的目录 useSubdirectories:是否检索子目录 regExp: 匹配文件的正则表达式 */ // 全局注册 Vue.component('svg-icon', svgiconfont) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req) |
在main.js引入icons文件夹下
即添加import ‘@/icons’
修改webpack.base.conf.js
添加代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | { test: /\.svg$/, loader: "svg-sprite-loader", include: [resolve("src/icons")], options: { symbolId: "icon-[name]" } }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', exclude: [resolve("src/icons")], options: { limit: 50000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } } |
使用方法
在页面中添加
1 | <svg-icon icon-class="breadcrumb"></svg-icon> |
如有错误的地方,请留言多多指教