What is the best way to integrate SVGs into a React project after transitioning from Vanilla JavaScript?

Question

What is the best way to integrate SVGs into a React project after transitioning from Vanilla JavaScript?

I am currently diving into an Advanced CSS course that explores the implementation of SVG's. However, the approach involves Vanilla JS whereas I aim to incorporate it into a React project.

When using Vanilla JS to embed an SVG into a button, you typically write code like this:

<button class="search__button">
    <svg class="search__icon">
        <use
            xlink:href="img/sprite.svg#icon-magnifying-glass"
        ></use>
    </svg>
</button>

Nevertheless, this code does not function properly within a React application. It is known that xlink:href needs to be modified to xlinkHref, and "class" should be changed to "className". Despite these adjustments, the SVG still fails to render.

What could be causing this issue and what modifications are necessary for successful SVG rendering in React?

javascript css reactjs svg

Answer 1

Answer №1

While I may not have a lot of experience with Svgs, one effective method to accomplish this is by converting the svg into a reusable component.

function SVG(props){
    
      return <svg> //insert the raw svg code here </svg>
    }

export default SVG;

Next, import the SVG component into the desired file like this:

import SVG from 'insert path to SVG component function here' ;

Once imported, you can utilize it as follows:

<button> 
<SVG/>
</button>

Alternatively, you can directly import the svg as if it were a regular image:

import Svg from 'insert path to raw svg location (not the component above)'

and then use it in your code like so:

<img src={Svg}>

Answer 2

While I may not have a lot of experience with Svgs, one effective method to accomplish this is by converting the svg into a reusable component.

function SVG(props){
    
      return <svg> //insert the raw svg code here </svg>
    }

export default SVG;

Next, import the SVG component into the desired file like this:

import SVG from 'insert path to SVG component function here' ;

Once imported, you can utilize it as follows:

<button> 
<SVG/>
</button>

Alternatively, you can directly import the svg as if it were a regular image:

import Svg from 'insert path to raw svg location (not the component above)'

and then use it in your code like so:

<img src={Svg}>

Answer 3

Answer №2

I have come across two rather simple solutions that seem to do the job, although I can't guarantee they are the most efficient.

If you have any other suggestions or improvements, please feel free to share them. If there is a superior solution, I will give it the recognition it deserves :)

Solution 1

One approach is to use the SVG file as the source for an

<button className="search__button">
    <img className="search__icon" src="/img/SVG/magnifying-glass.svg" />
</button>

This method stood out to me as the most effective one at first, but I encountered some issues with it initially. In my React project utilizing bundle.js and webpack, the path ended up being different than expected. So if you opt for this solution and encounter a broken image, try experimenting with the path. I went through several variations of the path, including starting with ../, and eventually, found a path that worked.

Solution 2

Alternatively, you can directly insert the SVG code into your JSX code. It may not be the most elegant solution, but it gets the job done.

<button className="search__button">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>magnifying-glass</title>
<path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
</svg>
</button>

Answer 4

I have come across two rather simple solutions that seem to do the job, although I can't guarantee they are the most efficient.

If you have any other suggestions or improvements, please feel free to share them. If there is a superior solution, I will give it the recognition it deserves :)

Solution 1

One approach is to use the SVG file as the source for an

<button className="search__button">
    <img className="search__icon" src="/img/SVG/magnifying-glass.svg" />
</button>

This method stood out to me as the most effective one at first, but I encountered some issues with it initially. In my React project utilizing bundle.js and webpack, the path ended up being different than expected. So if you opt for this solution and encounter a broken image, try experimenting with the path. I went through several variations of the path, including starting with ../, and eventually, found a path that worked.

Solution 2

Alternatively, you can directly insert the SVG code into your JSX code. It may not be the most elegant solution, but it gets the job done.

<button className="search__button">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>magnifying-glass</title>
<path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
</svg>
</button>

What is the best way to integrate SVGs into a React project after transitioning from Vanilla JavaScript?

Answer №1

Answer №2

Similar questions

Retrieve the entire webpage, not just the segmented Ajax response

Best Practices for Closing MySQL Connections in Node.js

JavaScript loop that removes the first matching element in an array

Error in inferring argument types for a generic interface function in Typescript

Can `display:none` and `display:inline` be used to reveal a hidden element nested within another?

Expanding the dropdown menu depending on the selection of the radio button

A guide to using jqGrid: Retrieve the value of a particular cell by double clicking on a row

What is the necessity of the contentLabel prop in react-modal?

selectors that seem to be floating

Is it possible to trigger the onNewRequest property when the onBlur event is fired for AutoComplete in Material-UI?

Having trouble with Bootstrap form-inline stacking issue, any tips on how to stop them from stacking?

Is there a way to transmit a video mediastream from ReactJS to Python via Websocket?

VeeValidate fails to validate input fields in a form that is constantly changing

The attempt to create a React app was unsuccessful after running the command `npm init react-app my-app

Present the grid card elements in a seamless and uniform manner, eliminating any gaps

The outcome of the method is not being displayed

Updating parent data after filtering props in a child component: A comprehensive guide

Submitting forms that contain files using jQuery and AJAX

Searching in sequelize for a specific date using a clause

Leverage the Nuxeo client SDK with Angular 6 for seamless integration with RESTClient in