https://github.com/kossnocorp/desvg

🌅 Converts SVG files into components 🌞
https://github.com/kossnocorp/desvg

decss preact react styled-components svg webpack

Last synced: about 1 month ago
JSON representation

🌅 Converts SVG files into components 🌞

• Host: GitHub
• URL: https://github.com/kossnocorp/desvg
• Owner: kossnocorp
• Created: 2017-06-30T14:53:45.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-13T03:41:58.000Z (about 6 years ago)
• Last Synced: 2024-05-21T12:28:46.869Z (8 months ago)
• Topics: decss, preact, react, styled-components, svg, webpack
• Language: JavaScript
• Homepage:
• Size: 3.91 KB
• Stars: 81
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.).

![](https://d3vv6lp55qjaqc.cloudfront.net/items/443d1R2G0J3i3v1W0D3W/desvg.png)

## Installation

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

```bash

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`:

```bash

npm install @kossnocorp/desvg --save

# or

yarn add @kossnocorp/desvg

```

## Configuration

```js

// ...

{

  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](https://github.com/kossnocorp/desvg/blob/master/index.js) for more implementation details.

### React

```javascript

import React from 'react'

import WarningIcon from './icon.svg'

export default function () {

  return (

    


      

      Warning, this is a warning!

    

  )

}

```


### Preact

```javascript

import { h } from 'preact'

import WarningIcon from './icon.svg'

export default function () {

  return (

    


      

      Warning, this is a warning!

    

  )

}

```


## 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](https://kossnocorp.mit-license.org/)

[desvg-loader]: https://github.com/kossnocorp/desvg-loader

[svg-loader]: https://github.com/dolbyzerr/svg-loader

[decss]: https://github.com/kossnocorp/decss

[defile]: https://github.com/kossnocorp/defile