sndrs / desvg

🌅 Converts SVG files into components 🌞

desvg

desvg converts SVG files into React/Preact components. It inlines SVG source so that you can alter it (animate, set color, control size, etc.).

Installation

If you want to use desvg with webpack, install desvg-loader and svg-loader:

npm install desvg-loader svg-loader --save-dev
# or
yarn add --dev desvg-loader svg-loader

To use the low-level API, or to manage the core library version, install desvg:

npm install @kossnocorp/desvg --save
# or
yarn add @kossnocorp/desvg

Configuration

// ...
{
  test: /\.svg$/,
  use: [
    'desvg-loader/react', // 👈 Add loader (use 'desvg-loader/preact' for Preact)
    'svg-loader' // 👈 svg-loader must precede desvg-loader
  ],

  // or if you prefer classic:

  loader: 'desvg-loader/react!svg-loader'
},
// ...

Usage

See low-level API docs for more implementation details.

React

import React from 'react'
import WarningIcon from './icon.svg'

export default function () {
  return (
    <div>
      <WarningIcon fill='yellow' width='32px' />
      Warning, this is a warning!
    </div>
  )
}

Preact

import { h } from 'preact'
import WarningIcon from './icon.svg'

export default function () {
  return (
    <div>
      <WarningIcon fill='yellow' width='32px' />
      Warning, this is a warning!
    </div>
  )
}

Related

• decss: the source of inspiration.
• defile: converts anything to components.
• desvg-loader: desvg webpack loader source code.
• svg-loader: SVG loader.

License

MIT © Sasha Koss