Br Icons Library

This library is a fork of 'lucide-react'

This library is used for implementation of the custom icons for react applications to be used in complementary with Lucide icons.

What is lucide? Read it here.

Installation

pnpm install @buildingradar/icons_library

How to use

First of all: make sure the icon conforms to the standards as described in docs/icon-design-guide.md, most importantly

• Icons must be designed on a 24 by 24 pixels canvas.
• For each icon these attributes are applied, corresponding to the above rules.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <!-- SVGElements -->
</svg>

• Allowed Elements SVG files may only contain simple path and shape elements, which may not have any attributes other than sizing and spacing.
  In practice only the following elements and attributes are allowed:

• <path d>
• <line x1 x2>
• <polygon points>
• <polyline points>
• <circle cx cy r>
• <ellipse cx cy rx ry>
• <rect x y width height rx>

This also means that no transforms, filters, fills or explicit strokes are allowed.

Never use <use>. While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents.

In the ./icons directory, paste the svg file, and create a json file according to icon.schema.json. You can copy paste existing json of other icons and edit accordingly. The file name should be identical, in kebap-case. For example inbox-search.svg & inbox-search.json.

You should not modify anything else. Files in any other directory is forked from Lucide's repository.

The pnpm build command will auto generate TypeScript code and modules for icons. You don't need to do anything else.

Previews

Storybook is not implemented for this repository.

Steps to link this repo to other repo without publishing intermediate versions:

• change the version number in package.json to a higher, temporary version. It helps for other repositories to recognize this is a different version and link correctly.
• pnpm build to build,
• npm link to create link for this repo
• run npm link @buildingradar/icons_library in your repo using this lib
• you can now import the new icons you added!

You can also publish test versions.

• change the version number in package.json to a higher, temporary version. (e.g. 1.0.1-alpha.1)
• npm publish
• use it in your repo