第一步：创建 react-svg 项目

index.js入口

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

App.js根组件

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

第二步：去 阿里巴巴矢量图标库 下载图标

第三步：将下载的文件解压、重命名放到 public 文件夹下

第四步：public 文件夹下的 index.html 引入字体图标

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

第五步：iconfont.css 中查看字体图标类名

第六步：组件中使用 i 标签，带上字体图标类名即可

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

第七步：给字体图标来点样式

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);
}

第八步：瞧瞧页面效果，还是最后一个最好看