首页 > 其他分享 >字节跳动官方出品,超级好用还能自定义

字节跳动官方出品,超级好用还能自定义

时间:2022-12-19 22:31:41浏览次数:49  
标签:字节 自定义 图标库 SVG 组件 IconPark 好用 图标

大家好 我是老鱼~

在项目开发过程中,​​图标​​是永远绕不开的话题。今天大师兄就和大家来聊一聊~

图标库现状问题

  • 图标​​数量少​

难以满足产品项目需求的,或遇到缺失图标的,往往还是需要设计师按所选图标的风格自己绘制。

  • 主要以​​单色​​的图标为主

在日渐繁荣(要求越来越高)的UI设计领域,往往需要多色甚至是彩色的图标来完成设计。

  • 图标库大多为​​web 开发者服务​

产品经理、运营专员、App 开发者、PPT 制作者等没有设计基础的同学使用仍需做转换,使用不方便。

IconPark解决方案

字节跳动官方出品,超级好用还能自定义_SVG

​IconPark​​ 的出现几乎把上面这些问题都解决了,能满足很大一部分的互联网项目需求。

图标​​数量多​​​,​​质量高​​​,支持很高程度的​​自定义​​​和​​多色彩主题​​​,​​二次修改​​非常方便。

关于 IconPark

​IconPark​​图标库是一个通过技术驱动矢量图标样式的开源图标库

可以实现根据单一SVG源文件变换出多种主题

具备丰富的分类、更轻量的代码和更灵活的使用场景;

致力于构建高质量、统一化、可定义的图标资源,让大多数人都能够选择适合自己的风格图标。

优势

  • 提供超过​​2400+​​高质量图标,分门别类,免费使用~
  • 字节跳动官方出品,超级好用还能自定义_SVG_02

  • 支持4种主题和在线换肤:​​线性、填充、双色、四色​​风格
    简单便捷的自定义设置框
    看我72变
  • ​支持多种便捷操作​​:复制SVG源码、复制React图标组件、复制Vue图标组件、下载PNG、下载SVG
  • 针对技术同学,​​支持图标组件代码包导出​​​, 包括​​React Icons​​​、​​Vue3 Icons​​​ 、 ​​SVG Icons​
//React组件
<Config theme="multi-color" size="48" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/>

//Vue组件
<config theme="multi-color" size="48" :fill="['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']"/>

//SVG标签
<?xml version="1.0" encoding="UTF-8"?><svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g><rect width="48" height="48" fill="white" fill-opacity="0.01" stroke-linejoin="round" stroke-width="4" stroke="none" fill-rule="evenodd"/><g transform="translate(4.000000, 4.000000)"><polygon stroke="#333" fill="#2F88FF" points="20 1.74860126e-15 14 6 6 6 6 14 1.74860126e-15 20 6 26 6 34 14 34 20 40 26 34 34 34 34 26 40 20 34 14 34 6 26 6" stroke-linejoin="round" stroke-width="4" fill-rule="nonzero"/><circle stroke="#FFF" fill="#43CCF8" cx="20" cy="20" r="6" stroke-linejoin="round" stroke-width="4" fill-rule="nonzero"/></g></g></svg>
  • 官网​​既是一个提供下载的网站,同时也是一个图标设计、编辑和管理工具​​针对不同的使用人群都非常友好,能极大地解决效率问题。

字节跳动官方出品,超级好用还能自定义_SVG_03

  • ​支持项目管理​​:登陆后,可以个性化上传、管理图标、及导出图标组件NPM包导出

字节跳动官方出品,超级好用还能自定义_SVG_04

如此高质量的图标库,除了建议大家赶紧收藏使用,别的也没啥说的了。祝大家搬砖快乐!

写在最后

欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式:在下方公众号后台,回复​​111​​,按提示操作即可进群。

字节跳动官方出品,超级好用还能自定义_SVG_05

标签:字节,自定义,图标库,SVG,组件,IconPark,好用,图标
From: https://blog.51cto.com/yudu233/5953951

相关文章

  • java 字节流和字符流的区别
    字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢?实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作的,而字符流在操作时使用......
  • Mac上最好用的录屏软件有哪些?
    Mac上最好用的录屏软件有哪些?星河故人工具产品爱好者  录屏是我们工作生活中经常要用到的一个工具,不管是录制会议还是网课,都是需要用到录屏功能......
  • 自定义Live2D插件配置并加载CDN数据
    修复博客问题的时候,发现加载​​Live2D​​的模型报了一堆错误。仔细看,是由于看板娘的动作文件出错了,而且居然是大小写的问题,想必windows服务器就不会出现这个问题,所以模......
  • uniapp 自定义app 退出提示 和 隐藏APP至后台
    自定义退出默人情况下,uniappAPP会在第一次按退出时,提示“APPName:再按一次退出应用”,其中APPName是配置的应用名称,“再按一次退出应用”是国际化自定义的内容。在......
  • Cesium自定义材质
    材质资料ApperanceCesium的材质封装在Cesium.MaterialAppearance/Cesium.Material类中。一般,Cesium的Primitive由GeometryInstance和Appearance组成,Geometry......
  • nginx入门指南之自定义编译安装(一)
    nginx之编译安装(一)一.下载软件软件名模块地址zlibgzip模块​​http://zlib.net/zlib-1.2.11.tar.gz​​pcrerewrite模块​​https://ftp.pcre.org/pub/pcre/pcre-8.00.tar.......
  • python自定义库文件路径
    各有各的小烦恼,各有的小期待这是人家私事,不要大嘴巴 在Pycharm中importwhois时,总是失败原因是安装了python3.x相关操作过程,将环境变量path中关于Python的配置c:\Python27......
  • 【QT开发问题】使用自定义的QGroupBox,重写绘图事件paintEvent后边框消失的问题
    问题描述Qt界面开发过程中,使用自定义的QGroupBox,重写绘图事件paintEvent时,出现边框被覆盖的情况,或边框消失的问题。左图是原始状态,直接重写绘图事件后,会变成右图空白状态......
  • 字节和字符的区别
    字节:数据存储是以“字节”(Byte)为单位,数据传输大多是以“位”(bit,又名“比特”)为单位。一个位可以使用0或者1进行表示。一个字节由8个位组成,比如:一个字节可以表示为:101000......
  • Java如何实现自定义异常
    自定义异常概述为什么需要自定义异常类:我们说了Java中不同的异常类,分别表示着某一种具体的异常情况,那么在开发中总是有些异常情况是SUN没有定义好的,此时我们根据自己......