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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

抓住StackOverFlowError的尾巴

使用Java程序时&#xff0c;可能要处理的一种更烦人的情况是StackOverFlowError&#xff0c;如果您有一个很好的可生产测试用例&#xff0c;那么关于使用堆栈大小或设置条件断点/某种痕迹 。 但是&#xff0c;如果您有一个测试案例可能一次失败100次&#xff0c;或者像我的案例…

sql server2016里面的json功能 - 转

测试一下基本的&#xff0c;从查询结果里面构造一个json 的格式 create table t1(ID int identity,name nvarchar(50),Chinese int ,Math int)insert into t1 values (张三,90,80),(李四,75,90),(王五,68,100) select * from t1select * from t1 for json auto--查询结果 ID …

CSS实现TikTok文字抖动效果

前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤&#xff0c;设计希望用代码实现&#xff0c;前端要设计出gif图&#xff0c;最后谁也不让谁&#xff0c;设计走了&#xff0c;留下了前端独自加班......CSS技术是前端必须掌握的一项技能&#xff0c;不仅要掌握&#…

当心findFirst()和findAny()

过滤Java 8 Stream &#xff0c;通常使用findFirst()或findAny()来获取在过滤器中幸存的元素。 但这可能并不能真正实现您的意思&#xff0c;并且可能会出现一些细微的错误。 那么 从我们的Javadoc&#xff08; 此处和此处 &#xff09;可以看出&#xff0c;这两个方法都从流中…

Intellij新建Spring项目引入用户目录下的Spring jar包

首先&#xff0c;在IntelliJ IDEA中新建module&#xff0c;选择Spring应用&#xff1a; 在初次使用时&#xff0c;如果IDE检测到本地没有spring核心库&#xff0c;则会在新建过程中下载对应库文件&#xff0c;在使用spring框架时&#xff0c;可以细分多种不同应用场景&#xff…

如何在typescript中使用axios来封装一个HttpClient类

我们通常开始直接在代码中使用像axios这样的第三方库。这没有错。但是&#xff0c;在不断变化的库&#xff0c;软件包&#xff0c;版本等世界中&#xff0c;直接使用这些库API可能会导致代码不一致。一个好的做法是创建自己的抽象并将对库API的调用包装到包装器中。这将使您保持…

c语言函数传参详解

24.1.普通变量作为函数形参 (1)普通变量作为参数在函数传参时&#xff0c;形参和实参名字可以相同也可以不同&#xff0c;实际上都是用实参来替代相应的形参的。 (2)在字函数内部&#xff0c;形参的值等于实参。原因是函数调用时把实参的值赋值给了形参。这就是所谓的”传值调用…

gRPC Web使用指南

gRPC 是一个高性能、通用的开源 RPC 框架&#xff0c;其由 Google 主要面向移动应用开发并基于 HTTP/2 协议标准而设计&#xff0c;基于 ProtoBuf (Protocol Buffers) 序列化协议开发&#xff0c;且支持众多开发语言&#xff08;&#xff09;。gRPC 提供了一种简单的方法来精确…

C# 发送email邮件!

利用C#邮件发送邮箱使用到两个类SmtpClient和MailMessage。可以把SmtpClient看做发送邮件信息的客户端&#xff0c;而把MailMessage看做需要发送的消息。 下面是我写的发送邮件的公共方法&#xff1a; 1 /// <summary>2 /// 3 /// </summary>4 …

JUnit 5 –扩展模型

我们已经对Java最普遍的测试框架的下一个版本了解很多。 现在让我们看一下JUnit 5扩展模型&#xff0c;该模型将允许库和框架将自己的实现添加到JUnit中。 总览 设定 基本 建筑 扩展模型 条件 注射 … 在新兴的《 JUnit 5用户指南》中可以找到您将在此处阅读的更多内容…

软件工程实验5

SA17225400 哪来的妖精 《软件工程&#xff08;C编码实践篇&#xff09;》MOOC课程作业http://mooc.study.163.com/course/USTC-1000002006 GitHub &#xff1a;https://github.com/littlewulei/Software-Engineering-Lab.git 实验要求&#xff08;参照视频中的具体实验过程&…

纯CSS实现水波纹效果

首先我们从结构和样式两个方面来讲解以上动图的实现过程&#xff1a;Html结构&#xff1a;<div class"square"><span></span><span></span><span></span><div class"content"><h2>Post Title</h…

乡村医生需要什么,看这张图就够了!

乡村医生需要什么&#xff0c;看这张图就够了&#xff01; 笔者最近在重庆市人民政府公开信箱中看到了一位赤脚医生写给政府的公开信&#xff0c;因读后无比感动&#xff0c;索性就摘录了出来&#xff1a; 来信内容&#xff1a; 我们是70-80年代的赤脚医生&#xff0c;是计划生…

java并发任务执行_Java并发性-任务反馈

java并发任务执行从我 上一篇 关于java.util.concurrent包的 文章 的结尾处 摘下来 &#xff0c;这很有趣&#xff0c;有时甚至必须在并发任务启动后从它们那里获得反馈。 例如&#xff0c;假设一个应用程序必须发送电子邮件批处理&#xff0c;除了使用多线程机制外&#xff0c…

Handsfree.js — 一个通过计算机视觉集成手势,面部表情和各种姿势识别的前端库

当电视上出现上图这种科技大片的时候&#xff0c;有没有幻想过有一天可以实现上图的这种交互&#xff0c;当我打开Handsfree这个库的介绍页时&#xff0c;看到前端页面竟然能够识别人的手势&#xff0c;面部以及各种肢体动作&#xff0c;简直刷新了我对前端能力的认知。确信这种…

Python中什么是set

Python中什么是set dict的作用是建立一组 key 和一组 value 的映射关系&#xff0c;dict的key是不能重复的。 有的时候&#xff0c;我们只想要 dict 的 key&#xff0c;不关心 key 对应的 value&#xff0c;目的就是保证这个集合的元素不会重复&#xff0c;这时&#xff0c;set…

SpringBoot:与JOOQ合作

在上一篇文章SpringBoot&#xff1a;与MyBatis一起工作中&#xff0c;我们学习了如何使用SpringBoot MyBatis Starter快速启动并运行Spring和MyBatis。 在本文中&#xff0c;我们将学习如何使用SpringBoot JOOQ Starter。 JOOQ&#xff08;面向Java对象的查询&#xff09;是包…

uni-app使用前的调研和开发心得

背景之前的工时系统是原生的小程序实现&#xff0c;由于产品逻辑需要优化&#xff0c;代码混乱又仅限微信平台使用&#xff0c;公司致力于想给工时系统重构后支持多平台&#xff0c;并对外开放使用&#xff0c;使之成为一款真正的商业产品。经过前期调研后&#xff0c;uni-app对…

EXPORT_SYMBOL使用

EXPORT_SYMBOL只出现在2.6内核中&#xff0c;在2.4内核默认的非static 函数和变量都会自动导入到kernel 空间的&#xff0c; 都不用EXPORT_SYMBOL() 做标记的。2.6就必须用EXPORT_SYMBOL() 来导出来&#xff08;因为2.6默认不到处所有的符号&#xff09;。 1、EXPORT_SYMBOL的…

技术人写作和写代码一样重要

也许当你老了会发出这样的感叹“曾经有无数条发财致富的道路摆在我面前&#xff0c;我不知道珍惜&#xff0c;现在老了才追悔莫及”。写技术文章无疑是做技术人工作之外一条很好的知识变现之路。而我也才最近顿悟&#xff0c;下定决心开始在coding的闲暇时间围绕自己的工作和兴…