美文网首页React Native开发
在React组件中使用本地SVG文件

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

作者: 振礼硕晨 | 来源:发表于2019-10-10 15:46 被阅读0次

    关于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;
    

    相关文章

      网友评论

        本文标题:在React组件中使用本地SVG文件

        本文链接:https://www.haomeiwen.com/subject/rfkapctx.html