How to Contribute Icons

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.

Add icon files

The packages/icons directory corresponds to the @ant-design/web3-icons package, and new icons should be added in this directory, specifically:

<root>

src

components

YOUR-ICON.tsxAdd icon components

svgs

YOUR-ICON.svgAdd icon svg

index.tsexport it

Add icon svg

Add new svg in svgs folder, file name should be the same as icon name, and use the kebab-case style for file name.

Also, please note that do not use id in the style attribute of the svg, because the react-inline-svg-unique-id plugin does not support style. We recommend that the properties in style be taken out as separate attributes as much as possible:

diff

- <circle style="fill:url(#ant-web3-icon-aave-circle-colorful-3);" cx="400" cy="400" r="388"/> # bad
+ <circle fill="url(#ant-web3-icon-aave-circle-colorful-3)" cx="400" cy="400" r="388"/> # good

Generate the react component for the icon

Execute the following command to automatically generate react components based on svg.

npm

yarn

pnpm

bash

npm run icons:generate

tsx

import * as React from 'react';
import AntdIcon from '@ant-design/icons';
import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';
import { ConfigProvider } from 'antd';
import classnames from 'classnames';

import SVGComponent from '../svgs/aave-circle-colorful.svg';

export const AAVECircleColorful = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => {
  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('web3-icon-aave-circle-colorful');
  return (
    <AntdIcon
      {...props}
      className={classnames(prefixCls, props.className)}
      ref={ref}
      component={SVGComponent}
    />
  );
});
AAVECircleColorful.displayName = 'AAVECircleColorful';

Naming specification

There are four types through the display form of icon:

circle colorful
colorful
circle filled
filled

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.

Based on the functions of the corresponding projects of icons, the following diversions are made:

Chain Icons
Token Icons
Tool Icons

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.

Test and verify

Verify whether the icon is displayed correctly in the local debugging environment.

Add icon svg

Add new svg in svgs folder, file name should be the same as icon name, and use the kebab-case style for file name.

diff

- <circle style="fill:url(#ant-web3-icon-aave-circle-colorful-3);" cx="400" cy="400" r="388"/> # bad
+ <circle fill="url(#ant-web3-icon-aave-circle-colorful-3)" cx="400" cy="400" r="388"/> # good

import * as React from 'react';

import AntdIcon from '@ant-design/icons';

import { type IconBaseProps } from '@ant-design/icons/lib/components/Icon';

import { ConfigProvider } from 'antd';

import classnames from 'classnames';

import SVGComponent from '../svgs/aave-circle-colorful.svg';

export const AAVECircleColorful = React.forwardRef<HTMLSpanElement, IconBaseProps>((props, ref) => {

const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);

const prefixCls = getPrefixCls('web3-icon-aave-circle-colorful');

return (

<AntdIcon

{...props}

className={classnames(prefixCls, props.className)}

ref={ref}

component={SVGComponent}

);

});

AAVECircleColorful.displayName = 'AAVECircleColorful';

Naming specification

There are four types through the display form of icon:

circle colorful

colorful

circle filled

filled

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.

Based on the functions of the corresponding projects of icons, the following diversions are made:

Chain Icons

Token Icons

Tool Icons

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.