在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;
复制代码