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




目录
相关文章
element-使用el-date-picker 选择日期后返回周几(整理)
element-使用el-date-picker 选择日期后返回周几(整理)
|
4月前
|
数据采集 存储 人工智能
掌握这4个绘制技术架构图要点,提升AI产品经理跨团队沟通
三桥君深入解析AI产品经理必备技能——技术架构图的绘制方法。文章详细阐述了技术架构图的三大作用、绘制关键思考、方法论及案例分析,助力提升跨团队沟通效率与项目成功率。适合希望掌握技术逻辑、推动AI产品落地的产品经理阅读学习。
188 2
|
5月前
|
数据采集 人工智能 数据可视化
如何让AI写出高质量的数据分析报告?DataV-Note的评估体系揭秘
本文围绕DataV-Note智能分析创作平台的评估体系建设展开,旨在探索如何在AI技术快速发展的背景下,构建一套科学、可量化、多维度的数据分析报告评估体系。
326 10
|
数据采集 XML 前端开发
五:《智慧的网络爬虫》— bs4数据解析
【8月更文挑战第4天】bs4(Beautiful Soup 4)是python的一个库,最主要的功能是从网页抓取数据,它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式。BeautifulSoup会帮你节省数小时甚至数天的工作时间。在本篇文章的最后设置了一个爬取全国所有天气的项目作为本篇文章的总结,愿大家有所收获~
342 6
五:《智慧的网络爬虫》— bs4数据解析
|
JavaScript 前端开发 CDN
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
417 0
vue 生成分享海报、下载图片(含生成二维码qrcodejs2的使用,网页截屏html2canvas的使用)
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
存储 数据采集 架构师
数据架构真的那么重要吗?一文读懂数据架构
数据架构侧重于技术和基础设施设计,而数据治理则包括人员、过程、工作流以及支持治理所需的体系结构。
数据架构真的那么重要吗?一文读懂数据架构
|
存储 关系型数据库 MySQL
debian11安装mysql5.7
debian11安装mysql5.7
624 0
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
小程序 前端开发 物联网
【经验分享】如何实现快速生成生活圈海报分享图
【经验分享】如何实现快速生成生活圈海报分享图
293 5