bytedance/iconpark

🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons

IconPark

English | 简体中文

Introduction

IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icons. Instead of using various SVG source files to achieve different themes, we implement a technology transforming attributes of a single SVG source file into multiple themes. Besides, we provide cross-platform components, including react-icons, vue-icons and svg-icons. So whether you are a designer or a developer, you can use them in your designs or your projects for free.

Packages

Generate Cross-platform Components

Find packages in packages folder. NPM packages make it painless to import icon components to your project.

Name	Github link	NPM link
React Icons	React Component	@icon-park/react
Vue2 Icons	Vue Component for old Vue2.0	@icon-park/vue
Vue3 Icons	Vue Component for Vue3.0	@icon-park/vue-next
SVG Icons	Pure SVG String	@icon-park/svg

Multiple themes

Basic coloring can be done by setting two attributes on the node: fill and stroke. Fill sets the color inside the object while stroke sets the color of the line drawn around the object. By changing this two attributes, you can transform a single SVG icon into different themes, including: outline, filled, two-tone, multi-color. Take the icon named camera for example:

Source file:

After Transforming:

React icons	Preview	Theme
<Camera theme="outline" size="32" fill="#000000"/>		Outline theme
<Camera theme="filled" size="32" fill="#333"/>		Filled theme
<Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/>		Two-tone theme
<Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/>		Multi-color theme

Embed IconPark in your project

If you need to use additional information such as icon name, author, category, label and creation time, you can use the icons.json file located in the root directory of each NPM.

Website

Customization

Here is the website of IconPark. Each icon is hand-coded within a 48x48 grid, using SVG stroke giving the maximum flexibility on styling. You can adjust the color, size, stroke-width, stroke-linejoin, stroke-linecap and other attributes to meet your needs.

Convenient Online Tools

You can use them in Figma, Sketch, Photoshop, PPT, etc.

• Copy SVG
• Copy React Icon Component
• Copy Vue Icon Component
• Download PNG
• Download SVG

Changelog

CHANGELOG.en-US | CHANGELOG.简体中文

iconpark's Issues

Website: lighter and faster color picker component

Hi! Nice icons and website!

I noticed that you're using react-color on your website.
Just want to suggest you consider using a lighter and faster option since react-color is 140 KB (far larger than the entirety of react-dom), is not tree-shakeable, is not accessible, does not support keyboard navigation, pulls in 11 dependencies, and is not as fast as it could be. See https://bundlephobia.com/[email protected]

Several months ago I created react-colorful as a modern replacement for react-color. My library is 18 times lighter (less than 2 KB gzip) and way faster:

• Demo
• Docs
• Benchmarks
• Article on DEV.to

Let me know if you're interested in using my component or if you need any help with migration.

Regards,
Vlad

部分图标的轮廓已经被扩展，无法调整描边粗细

分别是：
钥匙 key
刷新 refresh-one
广告产品 ad-product
录音 voice
摇滚手势 rock-gesture
文件夹 开 folder-open
表格
区域图
地图
电池充电

希望有更多的衣服类型和智能家居方面的

Website can't support English version

https://www.reddit.com/r/reactjs/comments/j1kgk3/bytedance_opensourced_iconpark_on_github/

希望能有关于物流的图标

希望能有关于物流的图标

官网首页不能滚动(chrome pc)

需要去掉 overflow-y : hidden

所有图标都有底色，没有线性图标，请设计一个退件管理，谢谢！！！！

[RFC] 新增直接复制 JSX 代码片段功能

应用背景

很多场景中，对 React 开发者来说，并不需要引入整个 @icon-park/react 库。他们只想在 IconPark 中在线选择想要的图标，即贴即用就行，但是目前 IconPark 平台仅支持 svg，希望能加入复制 jsx/tsx 功能。

写法差异

svg

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
  <path d="M9 18V42H39V18L24 6L9 18Z" fill="#2F88FF"/>
  <path d="M9 42V18L4 22L24 6L44 22L39 18V42H9Z" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M19 29V42H29V29H19Z" fill="#43CCF8" stroke="white" stroke-width="4" stroke-linejoin="round"/>
  <path d="M9 42H39" stroke="black" stroke-width="4" stroke-linecap="round"/>
</svg>

jsx

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="48"
  height="48"
  fill="none"
  viewBox="0 0 48 48"
>
  <path fill="#fff" fillOpacity="0.01" d="M0 0H48V48H0z"></path>
  <path fill="#2F88FF" d="M9 18v24h30V18L24 6 9 18z"></path>
  <path
    stroke="#000"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth="4"
    d="M9 42V18l-5 4L24 6l20 16-5-4v24H9z"
  ></path>
  <path
    fill="#43CCF8"
    stroke="#fff"
    strokeLinejoin="round"
    strokeWidth="4"
    d="M19 29v13h10V29H19z"
  ></path>
  <path
    stroke="#000"
    strokeLinecap="round"
    strokeWidth="4"
    d="M9 42h30"
  ></path>
</svg>

实现方式

使用这个库 svg2jsx 将 svg 转化成 jsx 即可。

import transform from '@svg2jsx/transform';

- onClipboard(svg)
+ onClipboard(transform(svg, {}))

Pull Requst

如果可以，我想加入 IconPart 大家庭，提 PR，成为 contributor 之一，谢谢 @AppleMonkey2019

[Vue warn]: Injection "ICON_CONFIGS"

vue 版本 2.6.12

删除node_moudules和 yarn.lock 重新 yarn 无效

{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@icon-park/vue": "^1.0.11",
"axios": "^0.20.0",
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"vue": "^2.6.12",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.12"
}
}

如何正确地配置 babel-plugin-import ？

在我的babel.config.js中，我的配置如下：

plugins = [
  [
    'import',
    {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: true,
    },
    'ant-design-vue',
  ],
  [
    'import',
    {
      libraryName: '@icon-park/vue',
      libraryDirectory: 'es/icons',
      camel2DashComponentName: false,
    },
    '@icon-park/vue',
  ],
]

这样配置的话，就会导致import { DEFAULT_ICON_CONFIGS } from '@icon-park/vue'报错：DEFAULT_ICON_CONFIGS is not defined
在我查看了库目录之后，发现DEFAULT_ICON_CONFIGS的导出文件不在es/icons下，我猜测是没有正确配置libraryDirectory的原因导致报错，所以应该如何正确配置呢？期待解答~

希望能加一个代表验证码的图标

比如注册登录里面常见的验证码输入框前面的 icon

Suport vue-next

想要商品和分类的图标

不能设置填充为currentColor，无法使用

currentColor，只为继承父级颜色，你不让设置，这怎么搞？

来自内部同学反馈：React Package 里IconType类型错误

BUG - 提示找不到模块 IconPark

项目：vue3 - vite - TS
错误描述：import {IconPark} from '@icon-park/vue-next/all'; 提示找不到模块 IconPark

可以做成一个sketch icon组件库吗

希望添加办公软件，类似于Word、PPT和Excel的图标

希望添加更多功能类图标。

希望添加工业控制领域相关的图标资源

现在的搜索结果不太友好，希望能改进

比如我要搜索“问号”图标，直接搜索结果是空，但如果我换成“问”这个关键字进行搜索，就会在符号里搜索到名字叫“帮助”的图标。
我问下这个关键字的匹配能不能让用户自定义？
就如上面的例子，我第一次可能需要通过“问”关键字才能搜索到“帮助”图标；
但我可以在搜索到这个结果后为其设置成“问号”关键字，这样下次我搜索“问号”或者“问”一样也能出现“帮助”图标。
以上愚见可以参考下。谢谢~

弄个捐助什么的吧，搞的更好一些，看好这个图标库

国内高质量的图标库真的不多，感觉这个还不错，虽然还有各种小瑕疵，不过都可以接受，希望越高越好，弄个捐助什么的，加油干吧。

关于下载使用默认名

现在下载下来的名称默认是英文，对于我这种英文不好的来说，常见的还可以翻译，大部分都不认识，下载的一多，就分不清谁是谁了，建议让下载下来的默认名称含有中文，或者说支持中英文切换，可以选择中文下载还是英文下载。

能不能支持本地缓存已选中图标呀？

例如iconfont，可以github 登录，然后加到购物车去，下次可以进到购物车看自己挑好的图标

个人认为 iconPark 有时间的话可以考虑一手，初版先把用户勾选选中的也存到浏览器里（local storage 或 indexed db之类的都不错吧），下次打开页面选中的就默认被选中

后续如果风格调整，直接改右侧菜单的配置，左侧所有选中图标都能看到效果就挺不错的

不然截图存起来自己选中了哪些，下回再一个个搜出来，再整体调整样式，哇，想都不敢想

当然，这只是个建议

官网滚动条把右侧的配置栏遮挡了

Size of `text-bold` icon

We are trying to use it in ByteMD

It seems the size of text-bold is slightly different from other icons if we put them together (16x16):

想要 直升机 游轮 跳伞等娱乐项目图标 谢谢~

希望加个 pin 图标，也是很常用的图

在vue中无法使用video图标。

在vue中使用video图标会报错，报错信息:Do not use built-in or reserved HTML elements as component id: video

Add `unordered-list` icon

I've noticed that there is a ordered-list icon. It would be great to have an unordered one

TT4B 中的一个图标

TT4B 看到一个标好似没见到，建议考虑增加

希望可以提供一些团队的icon

希望能把添加的图标添加到“项目”里

希望能把选择的图标加入到项目里，这样可以知道项目使用了哪些图标。（可以不用存储到云端，可以的话更好）

官网「拐点类型」配置问题

切换「拐点类型」没看到图标有明显的变化

[BUG] 在Vue中, 是不是click事件没有向父组件emit, 导致我使用@click无法调用methods内的函数

[BUG] 在Vue中, 是不是click事件没有向父组件发送emit('click'), 导致我使用@click无法调用methods内的函数, 代码如下

<full-screen-one
      theme="outline"
      size="24"
      fill="#fff"
      @click="fullScreen"
/>

通过console发现, 并没有打印出我预期的结果, 换个方式说, 根本就没有调用到fullScreen函数

@icon-park/react and @byte-design/icons do not behave in accordance

Version

@byte-design/icons: 0.11.7
@icon-park/react: 1.0.9

What's the question?

• The Loading icon can't always rotate
• I added style to the Return icon but does not work

What is expected?

The Loading icon should always rotate and the Return icon added style can take effect. I don't know if the other ICONS have problems.

Injection "ICON_CONFIGS" not found 报错，原因未知

有没有可能加一个`hoverColor`属性？

lark 图标只有填充的，没有线性的

lark 图标只有填充的，没有线性的，感觉不太美观

缺少相机、视频编辑相关的图标，比如翻转摄像头、闪光灯等。--来自用户反馈

[bug] 全局导入的时候提示找不到包

import {IconPark} from '@icon-park/vue/all';
我使用该语句全局导入IconPark, npm提示找不到@icon-park/vue/all, 按需导入没有问题且可以正常使用, 全局导入报错信息如下

 ERROR  Failed to compile with 1 errors   17:00:13
This dependency was not found:

* @icon-park/vue/all in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/material/list.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @icon-park/vue/all

className属性无效

能否增加拍卖相关的图标

用户反馈：import {IconPark} from '@icon-park/vue/all' 路径找不到

有没有房产方面的小图标呀

小区 社区 新房 二手房 这种呀

能否来一套街舞相关的图标

希望能增加一个裂图

图片加载失败可以用到

能否来一套健身房系列的~

设备：杠铃、哑铃、器械、无器械
锻炼部位：胸部、肩膀、等等。

如果你们准备开始搞，我可以帮你们做一个分类整理

缺少圆圈图标，下次迭代上线

未勾选&已勾选

”官方图标库“页面BUG

• 右侧工具栏刷新后错位
• 左侧导航栏定位高亮不准确

环境：
win10
Chrome (86.0) & Edge (86.0)

支持移动版

https://i.imgur.com/x0QWm5h.jpg