在React组件中使用本地SVG文件

关于SVG

• SVG可被非常多的工具读取和修改(比如vscode)
• 不失真, 放大缩小图像都很清晰
• SVG文件是纯粹的XML, 也是一种DOM结构
• 使用方便, 设计软件可以直接导出

使用场景

首先说一下我的使用场景：这是一个和使用 webpack 工具管理的React项目，现在我已经下载了几个 .svg 文件到本地，准备直接在React项目中导入并使用这些SVG文件。

如果你的项目不是React或者不是使用webpack管理，那么这篇博客可能不能确切解决你的问题，但是你可以参考我的思路。

使用方法

1. 配置处理SVG的规则

如果你没有对webpack做过相关配置，那么是不能在React组件中使用本地SVG文件的，如果你直接引入SVG文件，那么在编译的时候，可能会遇到以下错误：

注意到红框中的错误提示：我们需要一个还是的 loader 来处理SVG文件，这里介绍一个非常好用的loader：file-loader

首先执行以下命令，安装该loader：

npm install file-loader --save-dev

安装完成之后，到 webpack.config.js 文件中添加一条处理规则，代码如下：

module.exports = {
    // 其他的配置规则也省略
    module:{
        rules:[
            {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: "file-loader?name=assets/[name].[ext]"
            }
        ]
    }
};

2. 在React组件中使用SVG

处理规则配置完成之后，现在就可以直接在React组件中使用SVG文件了，使用方式和图片非常类似，以下给出实例代码：

import React from 'react'

// 引入SVG文件
const logoSvg = require("images/logo.svg")

class Login extends React.Component {
    render() {
        return (
            <div className="login-page">
                {/* 把SVG当作普通图片使用 */}
                <img src={logoSvg}></img>   
            </div>
        );
    }
}

export default Login;