请问react里面如何渲染上传的svg文件?

Question

像阿里iconfont图标库那样上传svg，并且能预览，这种是怎么把获取到的svg文件渲染到react里的？

Answer 1

新建一个文件放svg:

import Icon from '@ant-design/icons';

const mySvg = ()=>(
  <svg version="1.1" viewBox="0 0 72 72" className={你自己可以添加样式}>
    <path pid="0" d="M69 62.6c0 3.8-3.1 6.9-6.9 6.9H19.9c-3.8 0-6.9-3.1-6.9-6.9V18.4c0-3.8 3.1-6.9 6.9-6.9H62c3.8 0 6.9 3.1 6.9 6.9l.1 44.2zm-4-44.2c0-1.6-1.3-2.9-2.9-2.9H19.9c-1.6 0-2.9 1.3-2.9 2.9v44.1c0 1.6 1.3 2.9 2.9 2.9H62c1.6 0 2.9-1.3 2.9-2.9l.1-44.1z"></path><path pid="1" d="M5 41.5c-1.1 0-2-.9-2-2V9.4c0-3.8 2.7-6.9 6.6-6.9h33.1c1.1 0 2 .9 2 2s-.9 2-2 2H9.6C7.9 6.5 7 7.8 7 9.4v30.1c0 1.1-.9 2-2 2z"></path>
  </svg>
)

export const MyIcon = (props:any) => <Icon component={mySvg} {...props} />

使用：

import {MyIcon} from '...';
<MyIcon />

---

本地文件：

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

参考文档：https://create-react-app.dev/...

---

上传预览：demo预览