TODAY I LEARNED

Import SVGs as components in webpack

Install svgr:

npm install --save-dev @svgr/webpack

Add an import rule for svgs:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        use: ['@svgr/webpack'],
      },
    ],
  },
}

Voilà!

import Star from './star.svg'

const Example = () => (
  <div>
    <Star />
  </div>
)

Tweet

Learned by kevin-perez on Dec 9, 2024

Discover our latest blog posts
  • #javascript
  • view raw
  • permalink
  • 1 likes
previous TIL next TIL
  • Log in
  • ?

    TIL is an open-source project by MagmaLabs that exists to catalogue the sharing & accumulation of knowledge as it happens day-to-day. Posts have a 200-word limit, and posting is open to any MagmaLaber as well as selected friends of MagmaLabs. We hope you enjoy learning along with us.

    • /wearemagmalabs
  • statistics
  • search
  • Twitter