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

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

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

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

使用方式:

  • 访问在线网站:http://iconpark.bytedance.com/official

  • 在线配置->填充模式->选择图标大小32号,填充风格,绿色背景等->拷贝代码->复制代码

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

  • 多种图标类型只需改变theme属性

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

GitHub:https://github.com/bytedance/IconPark

下载React包:NPM地址 https://www.npmjs.com/package/@icon-park/react

下载Vue包:NPM地址  https://www.npmjs.com/package/@icon-park/vue

下载Vue3包:NPM地址 https://www.npmjs.com/package/@icon-park/vue-next

下载SVG包:NPM地址  https://www.npmjs.com/package/@icon-park/svg

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值