Oblivion Svg Package

A package that helps you to create svg sprite and reuse svg elements with ease.

Demo

Installation

npm i oblivion-svg --save

Usage

There are two components, Svg and SvgSprite.

First, you need to create a sprite, where you put all your svg files.

const CustomIcon = () => (
  <symbol id="svg-custom-icon" viewBox="0 0 80 80">
    <g>
      <path d="M40 80L11.72 68.28 0 40l11.72-28.28L40 0l28.28 11.72L80 40 68.28 68.28zM13.92 66.08L40 76.88l26.08-10.8L76.88 40l-10.8-26.08L40 3.12l-26.08 10.8L3.12 40z"/>
      <path d="M39.93 62.1A22.1 22.1 0 1 1 62 40a22.13 22.13 0 0 1-22.07 22.1zm0-41.32A19.22 19.22 0 1 0 59.15 40a19.24 19.24 0 0 0-19.22-19.22z"/>
    </g>
  </symbol>
)

const Sprite = () => (
  <SvgSprite>
    <CustomIcon />
  </SvgSprite>
)

Next, you need to include your sprite somewhere on the top and so that you can use your svg elements everywhere.

const Layout = () => (
  <main>
    <Sprite />
    <section>
      <Svg title="custom-icon" />
    </section>
  </main>
)

Additional info

You need to pass a required prop title to Svg element. There is also an optional size prop. All this properties will be used as a class for an element, so that you can style them easily.

Packages used:

• Classnames

License

MIT