Step 1: Create a React-SVG project

index.jsThe entrance

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(
    <App />.document.getElementById('root'))Copy the code

App.jsThe root component

import SvgCom from './components/SvgCom'
import './index.css'
function App() {
  return (
    <div className="root">
      <SvgCom></SvgCom>
    </div>)}export default App
Copy the code

Step 2: Go to Alibaba vector icon library to download ICONS

Step 3: Unzip and rename the downloaded filepublicfolder

Step 4: Public folderindex.htmlIntroducing font ICONS

<link rel="stylesheet" href="./iconfont/iconfont.css">
Copy the code

Step 5: Check the name of the font icon class in iconfont

Step 6: Use the I label in the component with the font icon class name

SvgCom.js

import React from 'react'
const SvgCom = () = > {
    return <div className='svg'>
        <i className='iconfont icon-gouwuche'></i>
        <i className='iconfont icon-ren-duoren'></i>
        <i className='iconfont icon-renminbi'></i>
    </div>
};
export default SvgCom
Copy the code

Step 7: Style the font icon

index.css

.svg {
  display: flex;
}
i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  background-color: rgb(0.204.162);
}
i:nth-child(2) {background-color: rgb(30.190.255);
}
i:nth-child(3) {background-color: rgb(255.115.130);
}
Copy the code

Step 8: Look at the page and see if the last one looks best