项目组零基础转做前端，求助前端项目目前流行的图标管理方案

[WangLiCha]

简单介绍下背景，我们项目组之前是做 WPF 开发的，现在有需求要把之前的项目做成一个简化版的前端版本。

其他技术方面调研和开展都还好，但是目前比较纠结于图标管理的方案。过去我们工作的流程是 UI 组的同事把图标做好放到蓝湖上，我们从蓝湖拿到 SVG 格式的图标，然后将其转换成 WPF 的 XAML 资源嵌入到程序集里。所以我们需要一个在尽量维持 UI 组工作方式不变的情况下找到一个适用于前端的方案。

目前我了解到的比较流行的方案就是 CSS Sprite 和图标字体。有哪些工具是比较适合制作这些资源的？我知道阿里有一个 iconfont 能把平台上的图标打包成字体，字节有一个 IconPark 还能导出成 Vue 组件（但是不清楚具体实现原理，而且貌似使用自己的图标只能上传到字节的服务器上？），但是可选的方案太多了，我们也缺乏经验判断不出哪个更好。

所以求助各位有经验的 V 友指导一下了

[noe132]

如果有构建流程：
https://github.com/gregberge/svgr
https://github.com/jpkleemans/vite-svg-loader
https://github.com/visualfanatic/vue-svg-loader
https://webpack.js.org/guides/asset-modules/

如果没有：
svg 放到 public ，然后直接写 <img src="..."></img>

[gouflv]

前端没有兼容问题就 svg ，可以直接引用，或者像 antd 那样的 UI 库，用组件抱包起来 统一维护

[murmur]

webpack 可以把小的图片打成 base64 ，现在不需要那么纠结，宽带时代还在问雪碧图这些除了面试没什么意义

我们是以 iconfont 为主，无他，设计能力辣鸡，只能用现成资源

[Huelse]

如果有产品出 svg 的话可用 fontcustom 打包

https://github.com/FontCustom/fontcustom

[3dwelcome]

@murmur 单纯的 base64 的图片复用很糟糕，远远不如 svg 。

图片再小，你也不可能每个相同的小图标，都注入一大段 base64 代码。

最好是写点图片复用框架，用 createObjectURL 来复用图标资源，或者注入到 css ，正文再引用。

[WangLiCha]

@murmur 啊，是说 Sprite 其实已经有些过时了吗？但是我看到的说法是可以节省很多服务的请求次数？

[WangLiCha]

@noe132 是用 Vue CLI 搭建的项目，看起来 vue-svg-loader 已经能完全满足要求了