One, foreword
It’s interesting to see the use of font ICONS in Ant Design, so let’s try one.
I wrote about how to use the Alibaba font icon in React in a previous article. If you don’t know, check it out.
This article is about how to package alibaba font ICONS so that you can use third-party font ICONS with the same flexibility and extra meaning as importing them in react+ TS projects.
Two, packaging steps
Step 1: InwebsiteSearch for your favorite icon and add it to my project
Step 2: Place the online link in Public/index.html with the script tag
<script src="//at.alicdn.com/t/font_3301400_zyfwnam4xck.js"></script>
Copy the code
Step 3: Test any component or HTML to see if the font icon is displayed on the page
Method 1: writing method of TSX file
import React from 'react'
const Test = () = > {
return <div>
<svg className="icon" aria-hidden="true">
<use xlinkHref="#icon-car"></use>
</svg>
</div>
}
export default Test
Copy the codeMethod 2: HTML file writing method
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-car"></use>
</svg>
</body>
Copy the codeThe page says: the car comes out, but it’s a little red
Step 4: Package MyIcon component analysis
1. Objective: You can customize the style, freely pass the icon name, and preferably click
<MyIcon className="someClass" type="icon-car" onClick={() = >{console.log('test')}} / >Copy the code2. Analysis: How to implement these functions
As you might have guessed, the parent component is passed through custom properties, and the child component is received through props. Perfect!
Step 5: Create the MyIcon component and specify the props type
The components/MyIcon/index. In the TSX:
// Specifies the type of component props
type Props = {
// Type of icon (required)
type: string
// Custom style of icon (optional)className? :string
// Click event (optional)onClick? :() = > void
}
const MyIcon = ({ type, className, onClick }: Props) = > {
return (
<svg
className={'icon'+className}
aria-hidden="true"
onClick={onClick}
>
<use xlinkHref={` # ${type} `} ></use>
</svg>)}export default MyIcon
Copy the codeStep 6: You can do whatever you want in any component
1. Custom styles
index.module.scss
:root{
:global{
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15 em;
fill: currentColor;
overflow: hidden;
}
.my-icon{
color: green; }}}Copy the code2. Use MyIcon component
Test.tsx
import MyIcon from '.. /components/MyIcon'
import styles from './index.module.scss'
const Test = () = > {
return <div className={styles.root}>
<MyIcon className='my-icon' type='icon-people'></MyIcon>
<MyIcon type='icon-cart'></MyIcon>
<MyIcon type='icon-Cart' onClick={()= > console.log('test')}></MyIcon>
</div>
}
export default Test
Copy the code2. 3. Smart water bottle
Third, summary
The idea behind encapsulating components: Test-driven development. MSC!