How to display svg icons(.svg files) in UI using React Component?

SVG icons are a popular choice for displaying scalable and customizable icons in web applications. If you are working with React, you might be wondering how to display SVG icons using React components. In this blog post, we will explore different ways to achieve this.

1. Using the img tag

One simple way to display SVG icons in a React component is by using the img tag. You can import the SVG file as a module and set it as the source of the img tag. Here’s an example:

{`import React from 'react';
import icon from './icon.svg';

const IconComponent = () => {
  return ;
};

export default IconComponent;`}

In this example, we import the SVG file as a module and assign it to the icon variable. Then, we use the src attribute of the img tag to set the source of the image to the icon variable.

2. Using the object tag

Another way to display SVG icons in a React component is by using the object tag. The object tag allows you to embed external content, such as SVG files, into your web page. Here’s an example:

{`import React from 'react';
import icon from './icon.svg';

const IconComponent = () => {
  return ;
};

export default IconComponent;`}
    In this example, we set the type attribute of the object tag to image/svg+xml to specify that we are embedding an SVG file. Then, we use the data attribute to set the source of the SVG file.
3. Using the SVG file directly
    If you prefer to include the SVG code directly in your React component, you can do so by importing the SVG file as a string and using it in your component’s JSX. Here’s an example:
{`import React from 'react';
import { ReactComponent as Icon } from './icon.svg';

const IconComponent = () => {
  return ;
};

export default IconComponent;`}
    In this example, we use the ReactComponent import syntax to import the SVG file as a React component. We then use this component in our JSX to render the SVG icon.
Conclusion
    Displaying SVG icons in a React component can be achieved using different approaches. Whether you choose to use the img tag, object tag, or import the SVG file directly, React provides flexibility in incorporating SVG icons into your UI. Choose the approach that best suits your project requirements and start adding beautiful and scalable icons to your React applications.

Share this:FacebookX

Related Posts:
Using Material icon with TypeScript: A Complete Guide Introduction: TypeScript is a popular programming language that adds static typing to JavaScript. It offers a…
Embedding SVG into ReactJS Embedding SVG into ReactJS SVG (Scalable Vector Graphics) is a powerful and flexible format for creating vector graphics. When working…
ts-node and svg import gives: SyntaxError: Unexpected token ‘<' ts-node and svg import gives: SyntaxError: Unexpected token ‘…
change color icon when I add movie to favorite in angular Change Color Icon When Adding Movie to Favorites in Angular As an Angular developer, you may often come across the…



	





	
	
	

	
	
		
		
			
			
				
				
					Posted				
				

				September 9, 2023

				
				
					in				
				

				React
			
			

			
			
				
				
					by				
				

				J. Kolby
			
			
		
		

		
		
			
			
				
				
					Tags:				
				

				React
			
			
		
		
	
	




	

	
	
		
		Comments
		

		

		

		

		
		Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Comment * Name * 
Email * 
Website 
 Save my name, email, and website in this browser for the next time I comment.
 

	
	
	
	














JS Duck 



Privacy Policy



© Copyright 2023





{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/twentytwentythree\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}


	
		window.WPCOM_sharing_counts = {"https:\/\/js-duck.com\/how-to-display-svg-icons-svg-files-in-ui-using-react-component\/":2500};
	
				
var ce4wp_form_submit_data = {"siteUrl":"https:\/\/js-duck.com","url":"https:\/\/js-duck.com\/wp-admin\/admin-ajax.php","nonce":"3355fee52a","listNonce":"e602cfda7b","activatedNonce":"58841eed2e"};




	( function() {
		var skipLinkTarget = document.querySelector( 'main' ),
			sibling,
			skipLinkTargetID,
			skipLink;

		// Early exit if a skip-link target can't be located.
		if ( ! skipLinkTarget ) {
			return;
		}

		/*
		 * Get the site wrapper.
		 * The skip-link will be injected in the beginning of it.
		 */
		sibling = document.querySelector( '.wp-site-blocks' );

		// Early exit if the root element was not found.
		if ( ! sibling ) {
			return;
		}

		// Get the skip-link target's ID, and generate one if it doesn't exist.
		skipLinkTargetID = skipLinkTarget.id;
		if ( ! skipLinkTargetID ) {
			skipLinkTargetID = 'wp--skip-link--target';
			skipLinkTarget.id = skipLinkTargetID;
		}

		// Create the skip link.
		skipLink = document.createElement( 'a' );
		skipLink.classList.add( 'skip-link', 'screen-reader-text' );
		skipLink.id = 'wp-skip-link';
		skipLink.href = '#' + skipLinkTargetID;
		skipLink.innerText = 'Skip to content';

		// Inject the skip link.
		sibling.parentElement.insertBefore( skipLink, sibling );
	}() );
	




var hcbVars = {"showCopyBtn":"1","copyBtnLabel":"Copy code to clipboard"};



_stq = window._stq || [];
_stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"223076394\",\"post\":\"2500\",\"tz\":\"0\",\"srv\":\"js-duck.com\",\"j\":\"1:14.5\"}") ]);
_stq.push([ "clickTrackerInit", "223076394", "2500" ]);







wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );



var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}};



var dracula = {"homeUrl":"https:\/\/js-duck.com","ajaxUrl":"https:\/\/js-duck.com\/wp-admin\/admin-ajax.php","pluginUrl":"https:\/\/js-duck.com\/wp-content\/plugins\/dracula-dark-mode","settings":{"excludes":[""],"colorMode":"presets","preset":"dracula"},"isPro":"","upgradeUrl":"https:\/\/js-duck.com\/wp-admin\/admin.php?billing_cycle=annual&page=dracula-pricing","nonce":"6bb325634b"};



var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"};



var windowOpen;
			( function () {
				function matches( el, sel ) {
					return !! (
						el.matches && el.matches( sel ) ||
						el.msMatchesSelector && el.msMatchesSelector( sel )
					);
				}

				document.body.addEventListener( 'click', function ( event ) {
					if ( ! event.target ) {
						return;
					}

					var el;
					if ( matches( event.target, 'a.share-facebook' ) ) {
						el = event.target;
					} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) {
						el = event.target.parentNode;
					}

					if ( el ) {
						event.preventDefault();

						// If there's another sharing window open, close it.
						if ( typeof windowOpen !== 'undefined' ) {
							windowOpen.close();
						}
						windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' );
						return false;
					}
				} );
			} )();
var windowOpen;
			( function () {
				function matches( el, sel ) {
					return !! (
						el.matches && el.matches( sel ) ||
						el.msMatchesSelector && el.msMatchesSelector( sel )
					);
				}

				document.body.addEventListener( 'click', function ( event ) {
					if ( ! event.target ) {
						return;
					}

					var el;
					if ( matches( event.target, 'a.share-x' ) ) {
						el = event.target;
					} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-x' ) ) {
						el = event.target.parentNode;
					}

					if ( el ) {
						event.preventDefault();

						// If there's another sharing window open, close it.
						if ( typeof windowOpen !== 'undefined' ) {
							windowOpen.close();
						}
						windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomx', 'menubar=1,resizable=1,width=600,height=350' );
						return false;
					}
				} );
			} )();