fusion: A JavaScript repository from gdixon

Making the web(3) more beautiful, fast, and open through great iconography.

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.

Fusion for Figma

online

Demo

You can see a demo here.

Using SVG Sprites

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>
}

Use with React

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'));

Use with ReactTypescript

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" />
)

License

See LICENSE