SVG格式的Icon，用了你就知道有多香-阿里云开发者社区

SVG格式的Icon，用了你就知道有多香

2022-05-18 500

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 继阿里的iconfont之后，字节跳动也出品了自己的矢量图标库，可以实现根据单一SVG源文件变换出多种主题，具备丰富的分类、更轻量的代码和更灵活的使用场景。

继阿里的iconfont之后，字节跳动也出品了自己的矢量图标库，可以实现根据单一SVG源文件变换出多种主题，具备丰富的分类、更轻量的代码和更灵活的使用场景。

Z67H9_QIV5EIGX9]85H@F9W.png

图片

矢量SVG图标的出现，完全改变了前端的开发方式，之前总是通过设计切图，然后合并成雪碧图（sprite），通过CSS引入背景定位的方式，不仅要写一堆的css代码，而且拓展灵活性不强，如果要改变图标的颜色和大小，又得重新做图，重复以上的步骤。

有了svg就方便多了，轻松地通过font-size和color来改变大小和颜色，一处引用，处处可用。并且是高质量的图，免去了使用2x和3x图的烦恼。

使用方式：

// 引用
import {CheckOne} from '@icon-park/vue'
// 调用
<check-one theme="filled" size="32" fill="#17bd08"/>

VCJ_~@D@@P6`5@_YV~N9BH8.png

9NUIH$XIUZSQ_Z1@(A4C]~C.png

对开发者友好，还针对不同的技术栈提供了不同的代码库，满足React/Vue/SVG/m移动端/小程序等多种开发场景使用：