Skip to content

Commit 2b1906d

Browse files
jeasonstudiojeasonstudio
authored
docs: how to contribute icons (#594)
* docs: how to contribute icons * docs: fix review comments
1 parent 12f76ed commit 2b1906d

File tree

2 files changed

+248
-0
lines changed

2 files changed

+248
-0
lines changed

‎docs/guide/contribute-icons.md

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
nav: Contributing
3+
group:
4+
title: Others
5+
order: 3
6+
---
7+
8+
# How to Contribute Icons
9+
10+
The crypto industry is evolving rapidly with new projects and standards emerging all the time. We welcome community contributions of icons to better support these projects.
11+
12+
## Add icon files
13+
14+
The `packages/icons` directory corresponds to the `@ant-design/web3-icons` package, and new icons should be added in this directory, specifically:
15+
16+
<Tree>
17+
<ul>
18+
<li>
19+
src
20+
<ul>
21+
<li>
22+
components
23+
<ul>
24+
<li>YOUR-ICON.tsx<small>Add icon components</small></li>
25+
</ul>
26+
</li>
27+
<li>
28+
svgs
29+
<ul>
30+
<li>YOUR-ICON.svg<small>Add icon svg</small></li>
31+
</ul>
32+
</li>
33+
</ul>
34+
</li>
35+
<li>index.ts<small>export it</small></li>
36+
</ul>
37+
</Tree>
38+
39+
## Add icon svg
40+
41+
Add new svg in `svgs` folder, file name should be the same as icon name, and use the [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case) style for file name.
42+
43+
If you need to use `id` or `classname` in svg, you need to add the prefix `ant-web3-icon-`. This is to prevent `svgo` from simplifying it, which causes the type to not be found. In svg, try to use the inline way to write styles, such as `fill: fff` for colors.
44+
45+
Good writing:
46+
47+
```svg
48+
<path
49+
style="fill:#020041;"
50+
d="M1494.8,856.4c171.5,289.1,336.4,582.2,505.2,873c-168.6,0.6-337.1-1-505.6,0C1493.8,1438.3,1492.9,1147.3,1494.8,856.4"
51+
/>
52+
```
53+
54+
There may be problems with the writing:
55+
56+
```svg
57+
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="color">
58+
<stop stop-color="#FF8B8B" offset="0%"></stop>
59+
<stop stop-color="#FF1717" offset="100%"></stop>
60+
</linearGradient>
61+
```
62+
63+
```svg
64+
<path
65+
fill:url(#color)
66+
d="M1494.8,856.4c171.5,289.1,336.4,582.2,505.2,873c-168.6,0.6-337.1-1-505.6,0C1493.8,1438.3,1492.9,1147.3,1494.8,856.4"
67+
/>
68+
```
69+
70+
In these examples, the ids are used as the match, which causes style conflicts or loss when multiple identical svgs appear at the same time.
71+
72+
## Complete the icon react component
73+
74+
In the `components` directory, refer to the following template to complete the component. There are two parts that need to be changed:
75+
76+
1. Icon component name
77+
2. Svg introduction name
78+
79+
```tsx | pure
80+
import * as React from 'react';
81+
import AntdIcon from '@ant-design/icons';
82+
import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
83+
import { ConfigProvider } from 'antd';
84+
import classnames from 'classnames';
85+
86+
import SVGComponent from '../svgs/aave-circle-colorful.svg';
87+
88+
export const AAVECircleColorful = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => {
89+
const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
90+
const prefixCls = getPrefixCls('web3-icon-aave-circle-colorful');
91+
return (
92+
<AntdIcon
93+
{...props}
94+
className={classnames(prefixCls, props.className)}
95+
ref={ref}
96+
component={SVGComponent}
97+
/>
98+
);
99+
});
100+
AAVECircleColorful.displayName = 'AAVECircleColorful';
101+
```
102+
103+
## Naming specification
104+
105+
There are four types through the display form of icon:
106+
107+
- circle colorful
108+
- colorful
109+
- circle filled
110+
- filled
111+
112+
The naming specification is: `{project name}-{type name}`, such as `aave-circle-colorful`. Using the correct naming specification will be automatically classified in the document.
113+
114+
Based on the functions of the corresponding projects of icons, the following diversions are made:
115+
116+
- Chain Icons
117+
- Token Icons
118+
- Tool Icons
119+
120+
If you need to make a special declaration, you can change it in the `.dumi/theme/builtins/IconSearch/fields.ts` file, otherwise it will be classified as the default classification.
121+
122+
## Test and verify
123+
124+
Export the newly added icon in `src/index.ts`, and then verify whether the icon is displayed correctly in the local debugging environment.

‎docs/guide/contribute-icons.zh-CN.md

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
---
2+
nav: 指南
3+
group:
4+
title: 其他
5+
order: 3
6+
---
7+
8+
# 如何添加图标
9+
10+
加密行业日新月异，新的项目和标准不断涌现。我们欢迎社区贡献图标，以便更好地支持这些项目。
11+
12+
## 添加图标文件
13+
14+
`packages/icons` 目录对应了 `@ant-design/web3-icons` 包，新的图标应该添加在这个目录下，具体为：
15+
16+
<Tree>
17+
<ul>
18+
<li>
19+
src
20+
<ul>
21+
<li>
22+
components
23+
<ul>
24+
<li>YOUR-ICON.tsx<small>添加图标组件</small></li>
25+
</ul>
26+
</li>
27+
<li>
28+
svgs
29+
<ul>
30+
<li>YOUR-ICON.svg<small>添加图标 svg</small></li>
31+
</ul>
32+
</li>
33+
</ul>
34+
</li>
35+
<li>index.ts<small>统一导出</small></li>
36+
</ul>
37+
</Tree>
38+
39+
## 添加图标 svg
40+
41+
在 `svgs` 目录下添加新的 svg 文件，文件名应该和图标名称一致，注意文件名应该使用 [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case) 风格。
42+
43+
svg 里面如果需要使用 `id` 或者 `classname`，需要加上前缀 `ant-web3-icon-`，这是为了避免 `svgo` 将其简化导致找不到类型。svg 中尽量使用内联的方式写样式，比如颜色用 `fill: #fff`。
44+
45+
好的写法：
46+
47+
```svg
48+
<path
49+
style="fill:#020041;"
50+
d="M1494.8,856.4c171.5,289.1,336.4,582.2,505.2,873c-168.6,0.6-337.1-1-505.6,0C1493.8,1438.3,1492.9,1147.3,1494.8,856.4"
51+
/>
52+
```
53+
54+
可能有问题的写法：
55+
56+
```svg
57+
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="color">
58+
<stop stop-color="#FF8B8B" offset="0%"></stop>
59+
<stop stop-color="#FF1717" offset="100%"></stop>
60+
</linearGradient>
61+
```
62+
63+
```svg
64+
<path
65+
fill:url(#color)
66+
d="M1494.8,856.4c171.5,289.1,336.4,582.2,505.2,873c-168.6,0.6-337.1-1-505.6,0C1493.8,1438.3,1492.9,1147.3,1494.8,856.4"
67+
/>
68+
```
69+
70+
这些例子里使用了 id 匹配，这样会导致多个相同 svg 同时出现的时候，样式冲突或丢失。
71+
72+
## 完成图标 react 组件
73+
74+
在 `components` 目录下参考如下模板完成组件，有两部分需要更改：
75+
76+
1. 图标组件名称
77+
2. svg 引入地址
78+
79+
```tsx | pure
80+
import * as React from 'react';
81+
import AntdIcon from '@ant-design/icons';
82+
import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
83+
import { ConfigProvider } from 'antd';
84+
import classnames from 'classnames';
85+
86+
import SVGComponent from '../svgs/aave-circle-colorful.svg';
87+
88+
export const AAVECircleColorful = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => {
89+
const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
90+
const prefixCls = getPrefixCls('web3-icon-aave-circle-colorful');
91+
return (
92+
<AntdIcon
93+
{...props}
94+
className={classnames(prefixCls, props.className)}
95+
ref={ref}
96+
component={SVGComponent}
97+
/>
98+
);
99+
});
100+
AAVECircleColorful.displayName = 'AAVECircleColorful';
101+
```
102+
103+
## 命名规范
104+
105+
通过 icon 的展示形式分了四种类型：
106+
107+
- circle colorful
108+
- colorful
109+
- circle filled
110+
- filled
111+
112+
命名规范为：`项目名-类型名称`，比如 `aave-circle-colorful`，使用正确的命名规范会在文档中自动分类。
113+
114+
根据 icon 对应项目的功能做了以下几种区分：
115+
116+
- Chain Icons
117+
- Token Icons
118+
- Tool Icons
119+
120+
如果需要特别声明，可以在 `.dumi/theme/builtins/IconSearch/fields.ts` 文件中更改，否则会归为默认分类。
121+
122+
## 验证
123+
124+
在 `src/index.ts` 中将新添加的 icon 导出，然后可以在本地调试环境验证图标的展示是否正确。

0 commit comments

Comments
 (0)