第一种方法

1. 在src下创建一个icons文件夹，再创建一个svg和一个index.js
2. svg文件夹中放入所有的svg

3. 创建一个组件SvgIcon代码如下

   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

   <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>

4. 在icons中的index.js中全局注册组件

   1 2 3 4 5 6 7

   <!--首先引入组件--> import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg组件 <!--注册组件--> Vue.component('svg-icon',SvgIcon)

5. 在代码中使用

   1 2	<!--name就是所要使用的svg名称--> <svg-icon icon-class="name"></svg-icon>

6. 进一步使用，由于是用js生成的svg代码，不够直观缺点

   不能按需加载
   自定义性差
   添加不友善

7. 因此我们通过使用svg-sprite-loader来实现多个svg的打包

   大专栏  vue中使用svg的方法

   • 首先安装svg-sprite-loader

     1	npm install svg-sprite-loader --save

   • 在vue的build > webpack.base.conf.js中添加svg的模块

     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: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } },

8. 自动导入 在index.js中添加如下代码

   1 2 3

   const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /.svg$/) requireAll(req)

9. 最后使用

   1 2 3

   <!--icon-class是所使用的svg名--> <!--class-name是图标的类名控制--> <svg-icon icon-class='language' class-name="card-panel-icon" />

10 .重点是要引入

1

import '@/icons'

学习地址

第二种方法

1. 与svg同级创建一个svg文件夹，放入需要的svg
2. 使用vue-svgicon
3. 通过文档实现svg的使用
4. 简单用法

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   npm install vue-svgicon --save-dev <!--配置--> "svg": "vsvg -s ./static/svg/src -t ./src/icons" <!--main.js中--> import * as svgicon from 'vue-svgicon' Vue.use(svgicon, { tagName: 'svgicon' }) <!--home.vue中使用--> <svgicon name="vue"></svgicon> <!--执行--> npm run svg