1. create-react-app已经在 react-scripts/lib/react-app.d.ts中定义好了资源
  2. src/ 根目录下，新建 assets/来管理静态资源
  1. src/assets
  2.     /images
  3.   /fonts
  4.   /media

媒体资源

  1. .jpg, .png, *.svg, base64
  2. *.mp4

icon字体

  1. ttf自定义字体, /src/assets/fonts/menlo.ttf
  2. 字体为全局样式
  3. /index.css 添加字体

index.css

  1. @font-face {
  2.   font-family: 'Menlo';
  3.   src: local('Menlo'), url(./assets/fonts/Menlo.ttf) format('truetype');
  4. }

app.module.less使用自定义字体

  1. .logo {
  2.   font-family: 'Menlo'; // 使用自定义的字体
  3.   font-size: 32px;
  4. }

svg组件化使用

图片以 svg格式渲染，以 react组件格式导入

  1. // 传统的使用
  2. import logo from './assets/images/logo.svg'
  3. <img src={logo} width={160} style={{color: 'red'}}/>
  6. // svg当做组件使用
  7. import logo from './assets/images/logo.svg'
  8. <Logo width={160} color="red"/>