icon的解决方案有很多，如
阿里的iconfont(www.iconfont.cn/)， 将自己喜欢的icon加购物车，然后导出css和字体文件，放到项目中实现。
- 优点是图标库较全，基本都能找到满足自己的图标，下载的也是需要的图标，引入体积小。
- 缺点是只能从官网下载图片，如果是自己公司设计的icon图标呢？项目中用到的icon后期有变动也需要加入购物车重新替换
font-awesome(www.fontawesome.com.cn/) 也是一个老牌图标库，可以通过cdn的方式引入到项目中，也可以通过npm install的方式安装到项目中。
- 优点是使用简单，分类比较全
- 缺点是全量引入，打包时体积较大
ant.design-icon（ant.design/components/… 是基于ant.design-ui的一套icon库，通过import的方式引入。底层原理是把每个icon都打包成一个单独的组件使用。
- 优点是实现了iocn的按需引入
- 缺点是使用有点别扭，例如嵌入到路由和buton中的iocn如何使用？
material-icon, bootstrap-icon...
综上所述，每一套icon库都有自己的特点，选择适合公司项目，开发熟悉，方便维护的即可。但如果公司自己提供了所有的svg图标，然后去按需引入，如何去实现呢？
一、方案一：打包svg组件，将自己需要的图标放置某一文件夹下，解析引用即可。具体可参考www.kancloud.cn/wh227598110…
二、方案二：参考网上开源案例，实现一套svg打包至npm，然后全局引入但是按需打包的一套方案；下面介绍一下该方案是如何实现的。
1、第一步拿到svg图标以后，通过icomoon（icomoon.io/） 工具将svg图标导入，然后右下角Generate, 然后download。如下图
下载完成后style.css和fonts文件夹下的字体文件是我们需要的
2、第二步制作导出文件，此处我是参考 @quasar/extras 实现的。可去quasar（github.com/quasarframe… 源码查看，进入到extras目录下，通过npm run install, npm run build即可打包出svg图标的入口文件。此处着重看一下build的逻辑，以及某一个icon文件夹的目录结构。看懂以后复制自己的一份即可，如在build文件夹下加入bibi-icons.js，以及外层目录加bibi-icons文件夹。如下图
3、将该组件发布至npm, 如何发布组件至npm可自行查阅。npm publish的时候如果遇到超出大小限制，可对组件大小，打包文件的多少单独做一下处理。
4、现在一个svg的npm组件包就打包好了，我们可以通过npm install的方式安装，通过quasar.config.js的extras: ['material-icons', 'bibi-icons'] 配置到全局,然后像quasar中q-icon的方式就可以使用了，这种方式完全也是按需打包。而且是把所有icon类名内置到npm包中，使用的时候用类名即可。
注意：
- build时svg图标源文件可参考quasar放入node_module中，打包的时候不会被打入。
- build文件夹下各icon.js的 路径是否解析正确，源码路径是否需要正则转义，此处在源码基础上增加了一句。
- 打包出的icon目录结构一定和其他icon文件夹保持一致，如果不一致请检查代码。其中index.json,index.d.ts,index.js,index.mjs都是build以后自动生成的。.css文件和字体文件需将步骤一生成的copy过来。build完成后目录结构及index.js和其他文件对比后保持一致离则成功就不远了。
- 打包完成使用的时会发现名称前缀有问题，此时需要到node_module下的 quasar/src/components/icon的目录下添加前缀部分即可
