@vivareal/lina-icons
The Lina Design System Iconography library
Using in your project
Install it as a dependency
npm install --save @vivareal/lina-icons
yarn add -d @vivareal/lina-icons
This is a private repo, so you'll need to be logged in NPM in order to install it. Also, you have to be part of vivareal organization at NPM. If you're not, please ask at Slack's #guild-front
channel to be added =)
Usage
With icAdd
being one of the available icons:
import { icAdd } from "@vivareal/lina-icons"
icAdd
will be the svg markup.
Running the documentation locally
Documentation generation is temporarily disabled.
Install dependencies
Go to root folder and then
make install
**Run vuepress in dev mode**
make docs-dev
It will start the vuepress dev-server and write the url on your terminal.
Contributing
Add a new icon
Please check with the Design Ops team at #squad-zap-design-ops if it's ok to add the icon to the library, after that, just follow those steps:
Add the svg file to src/images
folder and then build the project.
Please pay attention to two things:
- The name of the file should be the name of the icon on Figma.
- The
fill
property of the svg, should be currentColor
, to make the icon flexible enough to be rendered in any color.
Build the project
make build
This will run svgo
to optimize the icons and write them to dist/images
folder.
Also, it will use rollup
to bundle the icons together and export them as cjs
and esm
to be later imported and tree shook by the consumer project.
When the build process is done, open the pull request and wait for the approval.
Release
Releases are managed by Github Workflow. Please check the root's README for more infos.