department-svg
v0.1.0
Published
Svg sprite support for department.
Downloads
5
Maintainers
Readme
Department Svg Package
Svg sprite support for department.
Installation
npm i department-svg --save
Usage
There are two components, Svg
and SvgSprite
.
First, you need to create a sprite, where you will 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>
<Icon />
</SvgSprite>
)
Next, you need to include your sprite somewhere near the top so that you can use your svg elements everywhere.
const Layout = () => (
<main>
<Sprite />
<section>
<Svg title="icon" />
</section>
</main>
)
You can check the example
directory for a small example.
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:
- js
- classnames (easy class manipulation)
License
MIT