几乎是最优雅的图标方案 —— UnoCss的纯css方案

文章预览

点击上方  前端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、字体等资源，再放到你的项目中经过配置后使用。这不仅在处理图标时麻烦，还会占用比较大的资源（字体），甚至还有字体冲突的可能。长 ………………………………