Icons library supported for mobile and web. NPM Package
# Install all dependencies
> yarn # or yarn workspace @benepass/icons install
# Generate icons
> yarn workspace @benepass/icons generate
Install the package from npm:
> yarn add @benepass/icons
Note: for web since we're using a monorepo you can use this directly importing from source code
For react-native there's some extra steps you'll need to follow:
- Add @benepass/icons fonts folder
"assets": ["./path/to/lib/assets/fonts/"]
# Example
"assets": ["./node_modules/@benepass/icons/assets/fonts/"]
- Link new
benepass-font-icon
font family
> npx react-native link # or just react-native link
For Mobile and Web the library will work, since react-native doesn't render SVG directly, there's a file (Icon.native.js
) that will help and will render it.
import { ArrowLeft } from '@benepass/icons'
const BestComponent = () => (
<div>
<ArrowLeft color="red" size="200px" />
</div>
)
import { ArrowLeft } from 'icons/src/components/Icon'
const BestComponent = () => (
<div>
<ArrowLeft color="red" size="200px" />
</div>
)
Inside the scripts
folder the generate-system.mjs
file is the one in charge of generating the icons system this will generate everything for Mobile and Web.
To execute that file you can just run:
> yarn workspace @benepass/icons generate
This will map every icon inside the /assets/icons
folder and create the font family for mobile and the icons-map file for web.
To publish a new version of the NPM package there's a github action that will run on a new tag creation if the new tag has this format: icons@x.x.x
(example: icons@0.0.5
).
Don't forget to update the package.json version to match the new version before deploying, otherwise the script will break.
The main idea of this icon system is to have a single source of truth for both platforms (web and mobile) and to reduce design-development gap.
- Design Team publish new version on Figma
- Development Team export SVG from Figma
- Development Team upload SVGs into
/assets
folder - New release on Github
- Upgrade
@benepass/icons
package on client
- [ ] Create build script
- [ ] Update github action
- [ ] Update documentation
- [ ] Import from build folder
- [ ] Separate generate scripts (for mobile and web)
- [ ] Create separated scripts