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

简介: 继阿里的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

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

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


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

GitHubhttps://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




目录
相关文章
|
5月前
|
Web App开发 XML 存储
一篇文章讲明白JPG、PNG、GIF、SVG等格式图片区别
一篇文章讲明白JPG、PNG、GIF、SVG等格式图片区别
|
存储 Web App开发 编解码
图片:前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)
图片:前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF等)
849 1
|
6月前
|
Web App开发 移动开发 前端开发
SVG
这段代码将引用刚才定义的圆形,并将其放置在(20,20)的位置,大小为60x60。 除了<svg>和<use>元素外,SVG还提供了许多其他的元素和属性,可以帮助你创建各种复杂的图形。比如<rect>、<line>、<polygon>等元素,可以用来创建矩形、线条和多边形等。
77 0
|
移动开发 前端开发
h5 video以及img控件加上border显示不全的解决方案!
h5 video以及img控件加上border显示不全的解决方案!
283 0
使用GDI+显示PNG
使用GDI+显示PNG
138 0
|
XML 编解码 前端开发
一篇文章带你了解SVG 转换知识
一篇文章带你了解SVG 转换知识
222 0
一篇文章带你了解SVG 转换知识
VC2005中将Picture控件显示图片保存为BMP,JPG等格式
1.在stdafx.h头文件中加入   #include 2.保存图片   方法一:     HBITMAP hBitmap = NULL; //创建位图段 BITMAPINFO bmi; LPBYTE pBits; ZeroMemory(&bmi,sizeof(bmi)); //m...
997 0
|
存储 算法 索引