svg文件在element plus中的使用

由于之前工作都是使用react开发项目，趁着失业的时间打算学一手vue，准备写个demo，在搭建后台时打算使用iconfont里的图标。因为使用的是element plus ui的框架，看了官方文档的icon引入要使用svg图标，然后就去网上查了一些实现方案，就是使用一些 loader 类似于下面这种方式

<template>
<el-icon>
    <Svg />
</el-icon>
</template>

<script>
import Svg from './xxx.svg'
</script>

或者是自己封装iconfont转svg之类的，感觉不是很理想。

在element自带的图标组件中引入图标的方式是

<template>
<el-icon>
    <Message />
</el-icon>
</template>

<script>
import { Message, Setting } from '@element-plus/icons-vue'
</script>

这种就感觉比较符合开发习惯，需要什么组件引入什么组件。 于是就参考了element的图标库写了个小工具，实现将svg文件转换成vue或react组件，并把生成的组件装载到一个文件夹默认名是icons。

// 这样就可以按需引入了图标了
<template>
<el-icon>
    <Search />
</el-icon>
</template>

<script>
import { Search } from './icons'
</script>

npm包地址是：www.npmjs.com/package/svg…

有需要的小伙伴可以试试。使用方法也比较简单，先安装

npm install svg-vue-cli -g

安装好后，使用先将工作目录切换到svg文件所在的位置

cd /xxx

然后执行

svg-vue

要生成react组件的话就用svg-react指令。