React中使用SVG文件显示成图片

SVG 没法直接渲染都img。一般引用插件

• 方案一：使用 create-react-app脚手架 创建react项目
• 方案二：file-loader 插件

SVG文件优缺点

优点：

• 不失真, 放大缩小图像都很清晰
• SVG文件是纯粹的XML, 也是一种DOM结构

缺点：

• 不能修改宽高，使图片拉伸（一些项目需要变形显示覆盖，如全屏背景图等）

方案一：使用 create-react-app脚手架 创建react项目

react创建项目不止一种，用 create-react-app脚手架创建，自带支持svg。
适合初建项目。已创建的 往下看其他方案

安装：create-react-app

npm install -g create-react-app
或
cnpm install -g create-react-app
或
yarn global add create-react-app

创建项目（注:项目名称不能有大写）

react + js:
create-react-app projectname

react + ts / tsx（尽量用这个。可以创建js文件，后期拓展也不需要改）
create-react-app projectname --template typescript

代码

import React from "react";
import logo from '../../assets/logo.svg';

function DEMO() {
  return (
    <img src={logo} alt="" />
  );
}

export default DEMO;

.

方案二：file-loader 插件

安装：

npm install --save file-loader
或
cnpm install --save file-loader
或
yarn add file-loader

使用：

配置 webpack.config.js
若没有暴露，执行 npm run eject （不可逆，先备份或有git先提交代码）

module.exports = {
    // ...
    module:{
        rules:[
            {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: "file-loader?name=assets/[name].[ext]"
            }
        ]
    }
};

组件中使用SVG

import React from "react";
const logo = require("../../assets/logo.svg")

function DEMO() {
  return (
    <img src={logo} alt="" />
  );
}

export default DEMO;

其他：

还有其他类似的插件：

svg-sprite-loader、react-svg、react-svg-loader等，具体的百度，都是类似 安装依赖，配置loader，调用没了