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:

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:

- <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.

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.