@koobiq/kbq-icons
v8.0.0-beta.4
Published
Koobiq icons
Downloads
8
Maintainers
Readme
Icons
How to use package
npm i @koobiq/icons
Package structure
.
├── CHANGELOG.md
├── LICENSE
├── README.md
├── dist
│ ├── fonts
│ │ ├── kqb-icons.css
│ │ ├── kqb-icons.html
│ │ ├── kqb-icons.scss
│ │ ├── kqb-icons.ttf
│ │ └── kqb-icons.woff
│ ├── info
│ │ └── kqb-icons-info.json
│ ├── svg
│ │ ├── angle-down-L_16.svg
│ │ ├── angle-down-L_24.svg
│ │ ├── angle-down-M_16.svg
│ │ └── angle-down-M_24.svg
│ └── symbol
│ ├── sprite.scss
│ ├── sprite.symbol.html
│ └── svg
│ └── sprite.symbol.svg
└── package.json
How to rebuild package locally
Install dependencies
Install dependencies by running:
npm install
Sync with Figma
Create a file with name .env
and add there your Figma access token.
npm run figma:sync
Build all packages
npm run build:all
Output will be exported to a dist/icons
folder.
Publish new version
Step 1. Prepare and environment
Install dependencies by running:
npm install
Step 2. Draw an icon
- Draw your icon in Koobiq Icons figma file.
- Make icons contains the only single outlined and flattened path with name
shape
(second-color path with nameshape-2
). - Using a Fill Rule Editor plugin, set shapes' fill rule to Non-zero fill. Make sure icon is rendered correctly.
- Run flatten for shapes one more time (there is a bug in Figma).
Step 3. Export icons from figma
Create a file with name .env
and add there your Figma access token.
To export your icons (SVG) from Figma run the command:
npm run figma:sync
Step 4.
Change mapping.json
:
- Add an entry into
mapping.json
with a new codepoint keys. - Edit the name of an icon in the
mapping.json
in case of icon rename
Commit SVG files mapping.json
and and push all changes to git.
Step 5.
Run stage commit script to create a new release tag.
npm run stage:commit
Use semver for version naming. So increment major (first) version number if any of these changes were made:
- Any icon name was changed (breaking changes for front-end developers)
- Any icon codepoint was changed (breaking changes for tech writers)
- Significant changes in icon metaphor (breaking changes for all)
Using CSS Classes
Create a DOM element/container that contains kqb-icon
and the icon name like:
<div class='kqb-icon kqb-angle-down-L_16'></div>
Using SVG sprites
When needing to use the sprite.symbol.svg
sprite file, you can reference icons using the following method:
<svg>
<use xlink:href="sprite.symbol.svg#add" />
</svg>