shapeshiftone / fusion Goto Github PK

I believe the best way to bring personality and performance to websites and products is through great design and technology. My goal is to make that process simple, by offering an intuitive and robust collection of open source icons. By using fusion, you can integrate icons seamless and however you prefer.

online

You can see a demo here.

Download based on your needs fusion-coins.svg / fusion-interface.svg / fusion-web3.svg to your project.

Define CSS

.fusion{
background-color: white;
stroke: black;
stroke-width: 2px;
stroke-miterlimit: 5;
width: 64px;
height: 64px;
fill: none;
}

Add HTML Markup

Use the spritesheet what contains the icons you need ( interface.svg or coins.svg (or both), and add the icons name behind the #

<svg class="fusion">
<use xlink:href="sprites/fusion-interface.svg#alarm"></use>
</svg>
<svg class="fusion">
<use xlink:href="sprites/fusion-coins.svg#BTC_1"></use>
</svg>
<svg class="fusion">
<use xlink:href="sprites/fusion-web3.svg#coinbase"></use>
</svg>
}

const url = 'fusion-coins.svg';

const Icon = (props) => (
  <svg viewBox='0 0 64 64' className={`fusion`}>
    <use xlinkHref={`${url}#${props.fusion}`} />
  </svg>
);

ReactDOM.render(
  <div class="icons">
    <Icon fusion='ABBC_3437' />
    <Icon fusion='ADA_2010' />
    <Icon fusion='ADK_1706' />
  </div>,
  document.getElementById('app'));

Modulize for React Typescript, run:

node build_tsx.js

After building copy the icons folder to your React Application then you can import it as Component:

import { Add1 } from "./icons/interface"

const ReactFunction = () => (
    <Add1 width="16" height="16" />
)

import all as bundle:

import Svg from "./icons"

const ReactFunction = () => (
    <Svg.interface.Add1 width="16" height="16" />
)

See LICENSE