binary-ui-icons v0.6.55

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

License

MIT