Icons provided by Brio (A design system by Ooma Inc)

The library is used to generate the MUI-compatible icons from the SVGS provided by the design team. The SVG provided by the design team can be used directly including in the apps or by using plugins provided by SVGR. But this would lead to every app copying the icons to the source code, we want to avoid that.

Dependencies

1. React >= v16
2. MUI >= 5.4

The icons will not work if the above dependencies in the consumer app are not present. The library internally uses MUI and React.

How to generate the MUI-compatible icons

1. Clone the repo.
2. Install the packages using yarn install.
3. Copy the SVG's provided to src/svgs
4. On your terminal run yarn generate. (This would generate the MUI-compatible icon from the svgs)
5. The icons generated will be created in src/generated-icons.
6. If required these Icons can be copy-pasted to your application to test them.
7. To add capital letters to file types for svgs we need to use - after every word e.g sip-U-R-I.svg

To build the package locally and test

1. Run yarn build to generate a build.
2. The build would be generated in dist
3. The build can be used locally in another application using npm-link. Or the application can use the published icons package.

Publish package

The package is published automatically when we create a release tag. This would trigger the pipeline to create a new package and publish it to the registry.

Using the package in the any other application

1. Make sure the dependencies are installed.
2. Import the icon(s):

   import { Add, LockClosed } from '@brio/icons';

3. Just use the icon as mentioned below:

   <LockClosed fontSize="small" />

Contributing

The library majorly relies on the below libraries to do the conversion

• SVGR - This converts the SVG's to the components.

  • SVGR is internally optimizing the SVG to reduce the size and complexity using SVGO, we are using MUI optimization plugins to optimize the SVGS. This can be found here
  • The SVGR accepts a template to convert the icons to the desired format. This uses AST templates which are further processed by babel to convert it to JSX.
  • The template can be found in src/templates/muiTemplate.js
  • Custom Template Usage, Babel Transform

• Colors - The colors for the icons should be inherited from the component that is using it. The default colors provided by the design team are #7B61FF/#ED3DF1. We need to replace this. This can be done by using replaceAttrValues property of SVGR. Please check svgr.config.js

• Rollup - This is used to bundle and package the icons so that various applications can use the icons.