发布于 

在 vue 项目中使用 iconSvg

以前我的项目 Icon 都是使用 iconfont 来下载 SVG,然后在项目中使用这些 SVG

1
2
3
4
5
<img :scr=svgLogo />
...
<script>
import svgLogo from '@/assets/svg/handsome.svg'
</script>

代码现场手打,复制绝对报错。你想想每使用一个 svg 就要来这么一段,一看就让人内牛满面,后来知道了这个东西:svg-sprite-loader,大概的意思就是把 svg 转成了 htmlsymbol 标签,当然 98% 的人不会关心你到底是 symbol 还是 png,最主要是,引入要优雅 流畅 富有艺术气息
下面是封装好的 iconSvg 组件 是不是感觉 优雅 流畅 富有艺术气息了呢

1
<icon-svg icon-class="xxxxxxx" />

icon-class 里是 svg 的文件名

本文尽量简洁干练,为了方便大部分着急解决问题、准备Ctrl + C + V 连击直接带走的朋友,接下来我们开始吧

1
Vue Create vue-demo


好好好,有话好好说

安装插件

安装 svg-sprite-loader

1
yarn add svg-sprite-loader --save-dev

配置插件

vue.config.js 添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// webpack相关配置
chainWebpack: (config) => {
// 配置别名
config.resolve.alias.set("@", resolve("src"));
// set svg-sprite-loader
config.module.rules.delete("svg"); // 干掉module下名字叫svg的默认配置项
config.module
.rule("svg-smart")
.test(/\.svg$/) // 正则匹配文件名规则,就是匹配 .svg 文件
.include.add(resolve("@/icons/svg")) // 处理你的 svg 目录
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "[name]"
});

// other set ...
}

chainWebpack详解

创建iconSvg组件

src/components 文件夹内新建 iconSvg.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
<template>
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>

<script>
export default {
name: 'icon-svg',
props: {
iconClass: {
type: String,
required: true
}
},
computed: {
iconName() {
return `#${this.iconClass}`
}
}
}
</script>

<style>
.svg-icon {
width: 1em;
height: 1em;
font-size: 18px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

创建svg目录

src 下新建 icons/svg 目录,并把需要的 .svg 文件放入 svg 文件夹内

/icons 目录下新建 index.js 放入以下代码

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import IconSvg from '@/components/iconSvg/IconSvg'
// 全局注册icon-svg
Vue.component('icon-svg', IconSvg);

// 这个我也不知道啥意思
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

引用

main.js 中引用 icons 文件夹

1
import '@/icons'

使用

之后再需要的页面引用 即可

1
<icon-svg icon-class="zanwushuju" />

结语

如今的我,谈不上幸福,也谈不上不幸


本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

本站由 @xiangshu 创建,使用 Stellar 作为主题。