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-loaderTo use the low-level API, or to manage the core library version, install desvg:
npm install @kossnocorp/desvg --save
# or
yarn add @kossnocorp/desvgConfiguration
// ...
{
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.