在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;
複製代碼