An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
- Slashdot
- BoingBoing
- Mashable
- Web Designer Wall
- Joshua Blankenship
- Abduzeedo
- Creative Curio
- Naldz Graphics
- FanExtra - PSD
- Stylized Web
Help Webnuz
Referal links:
May 29, 2022 07:13 pm GMT
Original Link: https://dev.to/zougari47/how-to-import-svg-in-react-4ne3
How to import SVG in React
Method 1
using it as a source for img tag
import icon from './icon.svg';const Footer = () => { return( <Footer> {/*... */} <a href='#'> <img src={icon} alt=""/> </a> </Footer> )}Method 2
use it as component. In this way you can style SVG with CSS. change colors or animation with attributes like (storke, fill, stroke-dasharray ...)
import { ReactComponent as Icon } from './icon.svg';const Footer = () => { return( <Footer> {/*... */} <a href='#'> <Icon /> </a> </Footer> )}Method 3
Include SVGs directly in JSX. This is like the previous method but it may not be scalable for a large number of SVGs.
const Icon = () => {<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>}const Footer = () => { return( <Footer> {/*... */} <a href='#'> <Icon /> </a> </Footer> )}Original Link: https://dev.to/zougari47/how-to-import-svg-in-react-4ne3
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To