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,一经查实,立即删除!

相关文章

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的调用包装到包装器中。这将使您保持…

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;是计划生…

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

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

ejb jsf jpa_完整的WebApplication JSF EJB JPA JAAS –第1部分

ejb jsf jpa这篇文章将是迄今为止我博客中最大的一篇文章&#xff01; 我们将看到完整的Web应用程序。 最新的技术&#xff08;直到今天&#xff09;都将完成&#xff0c;但是我将给出一些提示以显示如何使本文章适应较旧的技术。 在本文的结尾&#xff0c;您将找到要下载的源代…

Jzoj4782 Math

若一个数x是平方数&#xff0c;则d(x)为平方数 所以就是要考虑有多少对i*j为平方数 我们假设&#xff0c;ip*k^2&#xff0c;那么&#xff0c;jp*q^2时&#xff0c;i*j为平方数&#xff08;p不含平方因子&#xff0c;k&#xff0c;q为正整数&#xff09; 所以&#xff0c;我们对…

前端暗黑模式,你了解多少

关于使用越来越多的前端暗黑模式&#xff0c;手机的app或网站都将支持暗黑模式逐渐成为一种规范&#xff0c;这样做的目的是什么呢&#xff1f;从我最初的理解是为了在黑暗的环境下屏幕上阅读的体验考虑&#xff0c;但是看了文摘却有另一种意义。暗黑模式究竟能不能起到省电的作…

两全其美的

使用抽象文档模式的类型安全视图 您如何组织对象&#xff1f; 在本文中&#xff0c;我将介绍一种模式&#xff0c;该模式以无类型的方式在您的系统中组织所谓的名词类&#xff0c;然后使用特征公开数据的类型化视图。 这使得只需少量的牺牲就可以在Java之类的语言中获得JavaScr…

Windows内核函数

字符串处理 在驱动中一般使用的是ANSI字符串和宽字节字符串&#xff0c;在驱动中我们仍然可以使用C中提供的字符串操作函数&#xff0c;但是在DDK中不提倡这样做&#xff0c;由于C函数容易导致缓冲区溢出漏洞&#xff0c;针对字符串的操作它提供了一组函数分别用来处理ANSI字符…

前端应该关注的2021年UI设计趋势

UI设计趋势几乎每年都在发生变化&#xff0c;变化的原因是人们的审美在变导致的&#xff0c;还是设计越来越人性化。市场上是谁在主导设计趋势&#xff1f;其中原因不得而知&#xff0c;我们先看看究竟有哪些变化&#xff1a;1. 3D插图&#xff08;依然流行&#xff09;3D图像将…

如何让你在开发者工具中查看源代码有语法高亮和暗黑主题的效果

如何让你在Chrome浏览器开发者工具中查看源代码的时候&#xff0c;和在代码编辑器中有同样的代码语法高亮的效果&#xff0c;而且还是深色主题&#xff0c;如果你是深色主题的爱好者就更合你意了。国外的美女开发者为你实现了这样功能的浏览器拓展&#xff0c;她的Github主页&a…

“太空语言”JavaScript编码标准规范指南

喷气推进实验室是 美国国家航空航天局的科研机构。 该实验室JPL开发大部分的软件是用在无人深度太空和其他行星探测的领域。他们拥有著名的 好奇号火星探测器 和 旅行者号探测器 。已经离开太阳系25年&#xff0c;仍然在飞行并提供科学信息。高水平的自动化和长期的任务导致了对…