binary-ui-iconsdeprecated

React icons for Cards' Binary Design.

Usage no npm install needed!

<script type="module">
  import binaryUiIcons from 'https://cdn.skypack.dev/binary-ui-icons';
</script>

README

binary-ui-icons

Guidelines

This package provides a set of React components implementing Binary Design System. Read more about components: Iconography.

Iconset

How to contribute

Icon style follows a set of rules:

  • Canvas size 512 × 512 px
  • Over 90% of icon fit inside 66 px / 446 px vertical and horizontal guides
  • When including filled and line style icon, append Alt at the end of the line icon filename
  • Stroke width 25 px, with 100% rounded ends
  • All shapes should be converted to curves. To import icons to this project, only <path> shape supported, no <rect>, <ellipse>, <line> or other basic SVG shapes

Merge all curves, export to SVG and copy path data d="" prop.

Example

From the Circle.svg file:

<svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" 
  style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
  <path d="M256,65.5c105.14,0 190.5,85.36 190.5,190.5c0,105.14 -85.36,190.5 -190.5,190.5c-105.14,0 -190.5,-85.36 -190.5,-190.5c0,-105.14 85.36,-190.5 190.5,-190.5Zm0,25c91.342,0 165.5,74.158 165.5,165.5c0,91.342 -74.158,165.5 -165.5,165.5c-91.342,0 -165.5,-74.158 -165.5,-165.5c0,-91.342 74.158,-165.5 165.5,-165.5Z"
  />
</svg>

extract data prop:

d="M256,65.5c105.14,0 190.5,85.36 190.5,190.5c0,105.14 -85.36,190.5 -190.5,190.5c-105.14,0 -190.5,-85.36 -190.5,-190.5c0,-105.14 85.36,-190.5 190.5,-190.5Zm0,25c91.342,0 165.5,74.158 165.5,165.5c0,91.342 -74.158,165.5 -165.5,165.5c-91.342,0 -165.5,-74.158 -165.5,-165.5c0,-91.342 74.158,-165.5 165.5,-165.5Z"

and use it in file named CardsIconCircle.jsx file:

import React from 'react';
import cardsIconHOC from '../hoc';

export default cardsIconHOC(
  ({ Group, Shape }) => (
    <Group>
      <Shape
        d="M256,65.5c105.14,0 190.5,85.36 190.5,190.5c0,105.14 -85.36,190.5 -190.5,190.5c-105.14,0 -190.5,-85.36 -190.5,-190.5c0,-105.14 85.36,-190.5 190.5,-190.5Zm0,25c91.342,0 165.5,74.158 165.5,165.5c0,91.342 -74.158,165.5 -165.5,165.5c-91.342,0 -165.5,-74.158 -165.5,-165.5c0,-91.342 74.158,-165.5 165.5,-165.5Z"
      />
    </Group>
  )
);

Do not include style="" prop of the shape, or any other props. Don't forget to import the newly created icon into Storybook for preview.

API

prop type default value
color string
size number '20'

License

MIT