Importing SVG files as React components with Vite
Read Time:57 Second
Chances are if you’ve ever used create-react-app and you wanted to import an SVG file as a React component, you did something like this and it Just Worked™:
|
1 2 |
<span class="k">import</span> <span class="p">{</span> <span class="nx">ReactComponent</span> <span class="k">as</span> <span class="nx">Logo</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./logo.svg</span><span class="dl">'</span> |
But, alas, if you have moved to using Vite more often, as I have, you can’t just do that.
Never fear, it’s still possible!
Enter vite-plugin-svgr
vite-plugin-svgr is a Vite plugin to transform SVGs into React components! It’s super intuitive to use:
|
1 2 |
npm <span class="nb">install </span>vite-plugin-svgr |
Add it to your vite.config.js:
|
1 2 3 |
<span class="k">import</span> <span class="nx">svgr</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vite-plugin-svgr</span><span class="dl">'</span> <span class="k">export</span> <span class="k">default</span> <span class="p">{</span> <span class="c1">// ...</span> <span class="na">plugins</span><span class="p">:</span> <span class="p">[</span><span class="nx">svgr</span><span class="p">()],</span> <span class="c1">// ...</span> <span class="p">}</span> |
And boom, you get your expected behavior!
|
1 2 3 |
<span class="c1">// somewhere in your React + Vite app</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">ReactComponent</span> <span class="k">as</span> <span class="nx">WhateverIcon</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./icons/WhateverIcon.svg</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// ...</span> <span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">SomeComponent</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p">(</span> <span class="p"><</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nc">WhateverIcon</span> <span class="p">/></span> Wow, I love icons, because I am a dweeb <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p">);</span> <span class="p">}</span> |
This is particularly useful if you’re using a library like MUI and you need to use a custom icon, like so:
|
1 2 3 4 |
<span class="c1">// somewhere in your React + Vite app</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Box</span><span class="p">,</span> <span class="nx">IconButton</span><span class="p">,</span> <span class="nx">SvgIcon</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@mui/material</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">ReactComponent</span> <span class="k">as</span> <span class="nx">WhateverIcon</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./icons/WhateverIcon.svg</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// ...</span> <span class="k">export</span> <span class="k">default</span> <span class="kd">function</span> <span class="nx">SomeComponent</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p">(</span> <span class="p"><</span><span class="nc">Box</span><span class="p">></span> <span class="p"><</span><span class="nc">IconButton</span> <span class="na">aria-label</span><span class="p">=</span><span class="s">"some icon"</span><span class="p">></span> <span class="p"><</span><span class="nc">SvgIcon</span><span class="p">></span> <span class="p"><</span><span class="nc">WhateverIcon</span> <span class="p">/></span> <span class="p"></</span><span class="nc">SvgIcon</span><span class="p">></span> <span class="p"></</span><span class="nc">IconButton</span><span class="p">></span> Wow, I love icons, because I am a dweeb <span class="p"></</span><span class="nc">Box</span><span class="p">></span> <span class="p">);</span> <span class="p">}</span> |
There’s other things you can do with vite-plugin-svgr, and there’s a list of options here.
Hope that’s helpful for ya, happy icon-ing!
Source: https://dev.to/cassidoo/importing-svg-files-as-react-components-with-vite-l3n
Tag Cloud
Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
