@virtuslab/tetrisly-icons

A collection of icons designed by Tetrisly Team: https://tetrisly.com/

Installation

You can install the library via npm, yarn or pnpm or your other favorite package manager.

npm install @virtuslab/tetrisly-icons

yarn add @virtuslab/tetrisly-icons

pnpm add @virtuslab/tetrisly-icons

Usage

Icon component

import { Icon } from '@virtuslab/tetrisly-icons';

const App = () => (
  <div>
    <Icon name="20-bluetooth" />
  </div>
);

to change color of the icon, use color prop:

import { Icon } from '@virtuslab/tetrisly-icons';

const App = () => (
  <div>
    <Icon name="20-bluetooth" color="#ff0000" />
  </div>
);

icons object with plain SVG components

You can also import icons object which contains all icons as plain React components that looks like this:

import * as React from 'react';

const SvgComponent = (props) => (
  <svg width="32px" height="32px" viewBox="0 0 48 1" {...props}>
    <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" />
  </svg>
);

export default SvgComponent;

To obtain such component, use icons object:

import { icons } from '@virtuslab/tetrisly-icons';

const App = () => {
  const SVG = icons['20-bluetooth'];
  return (
    <div>
      <SVG />
    </div>
  );
};

Scripts

yarn build - builds the package
yarn dev - starts the development server
yarn fetch-icons - fetches icons from Figma and saves them in svg/ folder
yarn storybook - starts storybook server

Development

to test the package locally, run:

yarn link

in the root directory of the package, and then:

yarn link tetrisly-icons

in the project you want to use the package in.

Developing

You should change your node version to node 18 (you can use nvm for that).

Scripts

To use yarn fetch-icons you need to add a few environment variables to your .env file:

# .env
FIGMA_API_TOKEN=
FIGMA_FILE_ID=
FIGMA_NODES_IDS=["3691-38992","3691-38993"]
DOWNLOAD_INTERVAL=50
COLORS_TO_REPLACE=["0x272E35"]

API Token you can find in your Figma account settings, File ID you can find in the URL of your Figma file. For example if your link looks like this: https://www.figma.com/file/hch8YlkIrYbU3raDzjPvCz/Untitled?node-id=0%3A1 then your File ID is hch8YlkIrYbU3raDzjPvCz.

Nodes IDs are the nodes that contain icons. For example 20x20 or 16x16.