React引用SVG的多种实现方式

最新推荐文章于 2025-06-05 09:15:29 发布

enl0ve

最新推荐文章于 2025-06-05 09:15:29 发布

阅读量1.8w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript学习前端文章标签： React SVG

本文链接：https://blog.youkuaiyun.com/Enl0ve/article/details/88752841

本文介绍了在React项目中引用SVG的两种方法。方法一是直接使用SVG标签，通过代码展示如何实现。方法二是借助`react-svg`模块，通过npm安装后在组件中使用SVG。这两种方法帮助开发者在React中顺利展示SVG图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

序

最近在尝试着用React仿写知乎，在写登录页面的时候，将SVG格式的知乎LOGO进行渲染时，却是没有成功，通过google&baidu，成功地解决了在React中引用SVG的问题。在此过程中，发现解决方法也是有这多种，现在我总结整理其中的两种方法，记录下来作为自己成长之路的一个铺路石。

正文

方法一：直接在使用svg标签

话不多说，直接上代码

    //Logo.js
    import React from 'react'

    //css
    const styles = {
   
   
        zhihuLogo:{
   
   
            "display":"flex",
            "justifyContent":"center"
        },
        svg:{
   
   
            "fill":"blue"
        }
    }