比肩阿里Iconfont图库的又一Icon库,太好用了

简介: IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义的图标资源,让大多数设计师都能够选择适合自己的风格图标,并支持把图标源文件导出为React、Vue2、Vue3、SVG多种形式的组件代码,让开发者使用更高效。

介绍

IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义的图标资源,让大多数设计师都能够选择适合自己的风格图标,并支持把图标源文件导出为React、Vue2、Vue3、SVG多种形式的组件代码,让开发者使用更高效。

IconPark于2020年3月9日正式开源,迄今为止已经在github是收获了4.4K star

主要有以下特点:

  • 提供超过2000+预设图标,分类
  • 支持4种主题和在线换肤:线性、填充、双色、四色
  • 网站提供多种便捷操作:复制SVG code、复制React 组件、复制Vue组件、下载PNG、下载SVG
  • 针对技术同学,支持图标组件NPM包导出,包括React Icons/ Vue Icons/ Vue3 Icons / SVG Icons

各地址如下:

网站地址:iconpark.bytedance.com
GitHub开源:https://github.com/bytedance/IconPark
建议反馈:https://github.com/bytedance/IconPark/issues

微信图片_20221212111345.gif


官网使用

调整大小

4edc953e2c684bbe819ffa954c899c08.png

粗线配置

4edc953e2c684bbe819ffa954c899c08.png

风格调整与颜色调整

4edc953e2c684bbe819ffa954c899c08.png


安装方式

这里只介绍一 vue3 下的安装使用方式,如果小伙伴有其它的平台的需求,可以去官网查看安装使用方式。

安装:

npm install @icon-park/vue-next --save

引入:

<template>
<home theme="filled"/>
</template>
<script>
import {Home} from '@icon-park/vue-next';
export default {
   components: {
       Home
  }
}
</script>

全局引入

import {install} from '@icon-park/vue-next/es/all';
import {createApp} from 'vue';
const app = createApp({});
// Install
install(app); // use default prefix 'icon', eg: icon is People, name is icon-people.
install(app, 'i'); // use custom prefix 'i', eg: icon is People, name is i-people.
app.mount('#app');

引入样式:

import '@icon-park/vue-next/styles/index.css';

配置属性:






prop description type default note
theme Theme of the icons. 'outline' | 'filled' | 'two-tone' | 'multi-color' 'outline'
size The width/height of the icon number | string '1em'
spin Rotate icon with animation boolean false
fill Colors of theme string | string[] 'currentColor'
strokeLinecap the stroke-linecap prop of svg element 'butt' | 'round' | 'square' 'round'
strokeLinejoin the stroke-linejoin prop of svg element 'miter' | 'round' | 'bevel' 'round'
strokeWidth the stroke-width prop of svg element number 4


常见问题

  • 图标库免费使用吗?

是,官方图标库2400+图标,免费使用

  • 与阿里 IconFont 有什么区别?
  1. IconFont图标数量非常丰富,支持用户侧上传图标及项目管理,IconPark是官方提供的规范化、统一化的高质量图标库,即前者侧重UGC,后者PGC
  2. IconPark官方图标库2300+个图标均支持风格属性变换,可对图标大小、颜色、线框粗细等属性进行设置,填充/多色随意转换,可根据单一SVG变换生成多套主题(仅使用了1个SVG源文件哦),与IconFont相比IconPark给用户开放了更多的图标设置功能;
  3. IconPark官方图标库,可以跨平台导出多种图标组件代码,包括React、Vue2、Vue3格式,尤其是在B端场景下,很方便前端同学使用
  • 图标库找不到图标怎么办

点击“Github Issue提需求”填入你想要绘制的图标及详情描述,负责同学将会为你绘制,两周内图标的绘制需求就会上到线上,供您下载使用。

总结

不管怎么说,IconPark 还是挺香的,在项目使用中也是比较方便的,大大的节约了前端同学的开发时间。特别是一些丰富的配置以及不同人群的使用,让你的工作变得更加高效而美观~~


相关文章
|
Web App开发 人工智能 Android开发
iconfont.cn 阿里出品的矢量图标库
Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。)
11645 0
iconfont.cn 阿里出品的矢量图标库
|
Linux 数据安全/隐私保护 网络架构
如何搭建远程控制家中设备的Home Assistant智能家居系统【内网穿透】(上)
如何搭建远程控制家中设备的Home Assistant智能家居系统【内网穿透】
945 0
|
9月前
|
人工智能 自然语言处理 API
自学记录HarmonyOS Next的HMS AI API 13:语音合成与语音识别
在完成图像处理项目后,我计划研究HarmonyOS Next API 13中的AI语音技术,包括HMS AI Text-to-Speech和Speech Recognizer。这些API提供了强大的语音合成与识别功能,支持多语言、自定义语速和音调。通过这些API,我将开发一个支持语音输入与输出的“语音助手”原型应用,实现从语音指令解析到语音响应的完整流程。此项目不仅提高了应用的交互性,也为开发者提供了广阔的创新空间。未来,语音技术将在无障碍应用和智慧城市等领域展现巨大潜力。如果你也对语音技术感兴趣,不妨一起探索这个充满无限可能的领域。 (238字符)
388 11
|
安全 生物认证 数据安全/隐私保护
多因素认证(MFA)
【8月更文挑战第20天】
2516 1
|
JavaScript
vue3如何关闭严格模式
vue3如何关闭严格模式
1091 0
|
图形学 开发者
【制作100个unity游戏之26】unity2d横版卷轴动作类游11(附带项目源码)
【制作100个unity游戏之26】unity2d横版卷轴动作类游11(附带项目源码)
262 0
|
Linux 数据安全/隐私保护 Docker
HomeAssistant系统添加HACS插件商店与远程控制家中智能家居
HomeAssistant系统添加HACS插件商店与远程控制家中智能家居
626 1
|
安全 fastjson Unix
《IntelliJ IDEA 插件开发》第七节:通过Inspection机制,对静态代码安全审查
一、前言 二、需求目的 三、案例开发 1. 工程结构 2. 伪随机数检测 3. FastJson检测 4. 提醒模板 5. 检测配置 四、测试验证 五、总结 六、系列推荐
1344 0
《IntelliJ IDEA 插件开发》第七节:通过Inspection机制,对静态代码安全审查
|
JavaScript 前端开发 算法
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
【Node.js 版本过高】运行前端时,遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
8483 0
|
Kubernetes Java 开发工具
开发阶段,将SpringBoot应用快速部署到K8S
背景对于生产环境,我们一般会用CI&&CD工具完成整个构建和部署,因此本文不适合生产环境;
768 2
开发阶段,将SpringBoot应用快速部署到K8S