@lendi-ui/icon
v9.12.2
Published
## Adding a new icon
Downloads
15,731
Maintainers
Keywords
Readme
@lendi-ui/icon
Adding a new icon
Add the SVG into src/icons. Be thoughtful with naming, as this will determine the name of the component. For example, the file computer-bank
will create a SVG component called computerBank
(note that the kebab-case filename will become a camelCase component).
To add a new alias, navigate to the ./build/alias.json file and add the key as the original file name (in pascal case) and give it an array with all the alias' to add.
When this package is built, an equivalent react component will be created in src/icons-compiled.
Installation
yarn add @lendi-ui/icon
Usage
import { Lock } from '@lendi-ui/icon';
<Lock color="secondary.500" />;
or, to take advantage of multiple entrypoints:
import Lock from '@lendi-ui/icon/Lock';
<Lock color="secondary.500" />;
Note: You must use the above syntax across your entire codebase to see any bundle savings from entrypoints
Fill colours not working?
In this case, you will need to add a fillPath
class to the element in the SVG that needs to be recoloured, this can be determined by inspecting the svg in the browser and changing the fill colour until you find the correct element.
Properties
<PropTable>
<PropTable.Entry required name="color" type={`string`} description="The Icon color"/>
</PropTable>