This repository contains components, images and hooks that do not depend on Suite-specific context, i.e. can be used in other Trezor-related projects as well. So far, they have only been used in Suite and @trezor/connect-ui.
Each component can be inspected separately in Storybook. Stories are deployed automatically by a nightly pipeline via storybook-build command to https://suite.corp.sldev.cz/components/develop. To see your local changes, run Storybook locally:
yarn workspace @trezor/components storybook
Icons in Suite are SVGs stored in src/images/icons and accessed via icons.ts. The SVGs should follow a set of rules so that they are efficient and easy to handle:
- minify the icon file by an optimizer
- the icon should be defined by fills rather than strokes - you can use an online tool or ask the designer if it does not work properly
- edit the SVG so that it's
width,height,opacity,filletc. are not defined - this should be handled by Suite - if needed, the space around the icon can be cropped using an online tool and/or by tweaking the viewBox property