主要观点总结
本文主要介绍了前端开发中图标处理的两种方案：iconfont和UnoCss。iconfont需要上传svg图标并生成一系列资源，而UnoCss则提供了一种更便捷的方式，只需将图标放入项目中即可使用。文章还介绍了UnoCss图标预设的使用方法和最佳实践，包括图标分类、svg转换、修改图标大小和颜色等。
关键观点总结
关键观点1: iconfont和UnoCss的介绍和比较
iconfont需要上传svg图标并经过加工导出资源，使用较为麻烦；而UnoCss只需安装图标库并直接使用，更为便捷。
关键观点2: UnoCss图标预设的使用方法
安装图标库后，在HTML中使用特定的class来调用图标，通过修改class来修改图标的大小和颜色。
关键观点3: UnoCss图标预设的最佳实践
包括图标分类、svg转换、修改图标大小和颜色等，提供了提高使用UnoCss图标预设效率和效果的建议。
文章预览
点击上方 前端Q ，关注公众号 回复 加群 ，加入前端Q技术交流群 前言 我们大部分切图崽都用过iconfont的图标方案，就算你没用过也不要紧，他看起来像这样子： < i class = "iconfont icon-hello" /> 通过class名 iconfont 指出这是iconfont图标，再通过 icon-hello 图标名指示要渲染哪一个图标。你可以通过修改字体的属性来改变其大小或颜色: < i class = "iconfont icon-hello text-xl" /> 看起来很好用，是吧？要说缺点，那就是对图标处理很麻烦。可以在这里查看 官方文档，简单来说，iconfont的图标本质上是字体。为了使用iconfont，你首先需要把svg图标上传到iconfont，然后图标会被iconfont处理加工，最后导出一系列css、js、json、字体等资源，再放到你的项目中经过配置后使用。这不仅在处理图标时麻烦，还会占用比较大的资源（字体），甚至还有字体冲突的可能。长
………………………………
