SVGs in JSX: Import, Use, and Animate in React

Scalable Vector Graphics (SVG) are perfect for crisp, resolution-independent visuals in modern web apps.

In React, you can import SVGs as components, inline them for full control, or animate them with CSS and JavaScript libraries. This guide covers:

1. Importing SVGs in React.

2. Rendering methods: <img>, inline <svg>, or ReactComponent.

3. Basic CSS animations.

4. Advanced animations with Framer Motion.

---

1. Importing SVGs in React

a) As an <img> source

Simplest method is treat the SVG like any image:

jsx

CopyEdit

import logo from './logo.svg';

function Header() {
  return ;
}

• Pros: easy, caches via the build pipeline.
• Cons: no direct styling of internal SVG elements.

b) Inline SVG via ReactComponent

Create a React component that renders the SVG for full control:

jsx

CopyEdit

import { ReactComponent as Logo } from './logo.svg';

function Header() {
  return ;
}

• Tip: With Create React App and many bundlers, importing with ReactComponent auto-converts the SVG into JSX.

---

2. Rendering Inline SVGs Manually

If you need dynamic attribute changes, paste the SVG markup directly:

jsx

CopyEdit

function StarIcon({ color = '#f5c518' }) {
  return (
    <svg viewBox="0 0 24 24" width="24" height="24" fill={color}>
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63"></path>
    </svg>
  );
}

• Pros: dynamic props, conditional rendering.
• Cons: larger component files, no bundler caching.

---

3. Styling & Postioning

Regardless of render method, you can style via CSS or inline styles:

css

CopyEdit

/* styles.css */
.svg-icon {
  transition: transform 0.3s ease;
}
.svg-icon:hover {
  transform: scale(1.1);

jsx

CopyEdit

import { ReactComponent as Logo } from './logo.svg';
import './styles.css';

function LogoButton() {
  return <Logo className="svg-icon" />;
}

---

4. Basic CSS Animations

Animate inline SVG attributes with CSS keyframes:

css

CopyEdit

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.pulse-icon {
  animation: pulse 2s infinite ease-in-out;
}

jsx

CopyEdit

import { ReactComponent as Heart } from './heart.svg';
import './styles.css';

function Heartbeat() {
  return <Heart className="pulse-icon" />;
}

---

5. Advanced Animations with Framer Motion

For richer motion—SVG path morphing, staggered draws—use Framer Motion:

bash

CopyEdit

npm install framer-motion

jsx

CopyEdit

import { motion } from 'framer-motion';
import { ReactComponent as Check } from './check.svg';

function AnimatedCheck() {
  return (
    <motion.div
      initial={{ scale: 0 }}
      animate={{ scale: 1, rotate: 360 }}
      transition={{ duration: 0.8 }}
    >
      <Check />
    </motion.div>
  );
}

Or animate stroke dashoffset for “draw” effects:

jsx

CopyEdit

<motion.svg
  viewBox="0 0 24 24"
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
  transition={{ duration: 1 }}
>
  <motion.path
    d="M2 12h20"
    stroke="#000"
    strokeWidth="2"
    fill="none"
  />
</motion.svg>

---

6. Best Practices for SVG Assets

• Optimize files: remove unnecessary metadata with SVGO.

• Use a CDN or asset pipeline. Learn more in our guide on Optimizing Images for CMS Usability.

• Leverage caching by importing via bundler when possible.

For managing SVGs in a headless CMS workflow, consider storing raw SVG code in a rich text field or as an asset—see our notes on CDN Assets & Caching.

---

Conclusion

Whether you import SVGs as simple <img> sources, inline JSX components, or fully animate them with Framer Motion, React offers flexibility for every use case. 

By following these patterns and linking your assets through a CMS workflow, you can deliver crisp, performant, and engaging vector graphics across your applications.