@benepass/icons v0.0.58
@benepass/icons package
Icons library supported for mobile and web. NPM Package
Setup
# Install all dependencies
> yarn # or yarn workspace @benepass/icons install
# Generate icons
> yarn workspace @benepass/icons generate
Installation
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
Using react Native
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
Usage
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.
:warning: Warning The import will change once we've the build process (now we're installing it directly from the source code, but in a future a "dist" folder will exist or something similar so the import will change.
From NPM
import { ArrowLeft } from '@benepass/icons/src/components/Icon'
const BestComponent = () => (
<div>
<ArrowLeft color="red" size="200px" />
</div>
)
From workspace
import { ArrowLeft } from 'icons/src/components/Icon'
const BestComponent = () => (
<div>
<ArrowLeft color="red" size="200px" />
</div>
)
Generate
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.
Publish
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.
Design-Development
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.
Flow
- 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
To Do
1 month ago
2 months ago
2 months ago
10 months ago
10 months ago
9 months ago
9 months ago
8 months ago
11 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago