This is my fourth day of the August Challenge

1 installation

    npm install --save @ant-design/icons
Copy the code

Use (after the structure, consistent with the use of the component), what ICONS need to be copied to the official website.

import { StepForwardOutlined } from '@ant-design/icons';
<div>
    <StepForwardOutlined/>
</div>
Copy the code

Icon type: the official website is divided into three styles

  • Wireframe style ending is Outlined:<StepForwardOutlined />
  • The solid base style ends with Filled:<StepForwardFilled />
  • The two-tone style ends with TwoTone:<DownCircleTwoTone />

3 icon rotation: Spin rotate animation, rotate Angle

    <SyncOutlined spin /> 
    <SmileOutlined rotate={180} />
Copy the code

4 Multi-color icon: (only applicable to the two-color style) Used to change the color of the two-color icon.

   <HeartTwoTone twoToneColor="#eb2f96" />
   <HeartTwoTone />
Copy the code

As shown in the figure, the default is blue

5 Customize ICONS

5.1 SVG code using IconFont

Cannot be deconstructed like other existing ICONS

import { StarTwoTone ,ForkOutlined} from '@ant-design/icons';
import Icon from '@ant-design/icons'
Copy the code

Declare a functional component (the SVG code is copied in Ali IconFont)

const PandaSvg = () = > (
  <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
    <path
      d="M99.096 315.634 S-82.58-64.032-82.58-132.13 c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162 l - 165.162 115.614 zM924.906 s82.58 315.634 64.032 82.58 132.13 c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91 99.096 165.162 99.096 165.162 115.614 z l165.162"
      fill="#6B676E"
      p-id="1143"
    />
    <path
      d="M1024 561.548 C0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548 z"
      fill="#FFEBD2"
      p-id="1144"
    />
    <path
      d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"
      fill="#E9D7C3"
      p-id="1145"
    />
    <path
      d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74 - z"
      fill="#FFFFFF"
      p-id="1146"
    />
    <path
      d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096 c - 49.548-33.032-132.128-148.646-132.128-181.678 zM412.904 c0 495.484-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z"
      fill="#6B676E"
      p-id="1147"
    />
    <path
      d="M512.002 726.622 C-30.060 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032 - z"
      fill="# 464655"
      p-id="1148"
    />
    <path
      d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
      fill="# 464655"
      p-id="1149"
    />
    <path
      d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
      fill="# 464655"
      p-id="1150"
    />
  </svg>
);
Copy the code

Declare the callback function to pass Pandasvg as a parameter to the parent component Icon, and then use the component PandaIcon

const PandaIcon = props= > <Icon component={PandaSvg} {. props} / >;

<PandaIcon/>
Copy the code

5.2 Use personal icon items

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2503482_i88n1525tqb.js'});<IconFont type="iconPensyumaobi" />
Copy the code

So scriptUrl corresponds to this.js

The type attribute of IconFont corresponds to the name of the icon below.

So how to add ICONS to my project see another article