packages/icons/README.md

   1 # @proton/icons
   2
   3 This package contains [icon set](https://design-system.protontech.ch/?path=/docs/core-concepts-icons--icons) used across Proton's products.
   4
   5 There are 2 ways of consuming this package:
   6
   7 -   Using the auto-generated React components (recommended)
   8 -   Using the sprite file
   9
  10 ## Consuming the Icon React components
  11
  12 ```js
  13 import { IcGlobe } from '@proton/icons';
  14
  15 const MyComponent = () => <IcGlobe size={6} />;
  16 ```
  17
  18 Icons are tree shaken, so any icons you do not use will not be included in the bundle.
  19
  20 ## Using the SVG sprite
  21
  22 You can use the `Icons.tsx` component to import the sprite.
  23
  24 Then you can use the [Icon component](https://design-system.protontech.ch/?path=/docs/components-icon--basic).
  25
  26 ## Update the icons
  27
  28 In case some icons need to be changed/added, the process is:
  29
  30 -   edit the `assets/sprite-icons.svg` file (making the relevant changes there)
  31 -   run `yarn workspace @proton/icons build` to generate the React components