@eventstore-ui/icon-manager
Automated icon inclusion for Event Store design system.
Install
yarn add --dev @eventstore-ui/icon-managerUsage
Global options
| Option | Description |
|---|---|
| --help | Display help for this command |
| --version | Display the current version |
Add
icon add [name]Adds an icon with the specified name to the specified directory, updating the index file
Positionals
| Option | Description | Required | Type |
|---|---|---|---|
| name | The name of your icon (Will be converted to pascal case) | yes | string |
Options
| Option | Alias | Description | Required | Type |
|---|---|---|---|---|
| --dir | -d | Where to store your icons | yes | path |
| --file | -f | Take the SVG from a file path. Absolute, or relative to the current working directory. | path | |
| --clipboard | -c | Take the SVG from the clipboard. Can have a file in your clipboard, or the svg data. | boolean | |
| --force | Overwrite existing icons or aliases | boolean |
Examples
Add MyIcon.tsx to
./icons from ./svg-icon.svg
icon add MyIcon --dir=./icons --file=./svg-icon.svgAdd MyIcon.tsx to ./icons from clipboard
icon add MyIcon --dir=./icons -cDisplay help
icon add --helpRemove
icon remove [name]Removes the icon or alias with the specified name from specified directory, updating the index file
Positionals
| Option | Description | Required | Type |
|---|---|---|---|
| name | The name the icon to remove | yes | string |
Options
| Option | Alias | Description | Required | Type |
|---|---|---|---|---|
| --dir | -d | Where your icons are stored | yes | path |
Examples
Remove MyIcon from ./icons
icon remove MyIcon --dir=./iconsDisplay help
icon remove --helpAlias
icon alias [name] [alias]Aliases the icon with the specified name from specified directory, updating the index file
Positionals
| Option | Description | Required | Type |
|---|---|---|---|
| name | The name the icon to alias | yes | string |
| alias | The name you want to alias | yes | string |
Options
| Option | Alias | Description | Required | Type |
|---|---|---|---|---|
| --dir | -d | Where your icons are stored | yes | path |
Examples
Remove MyIcon from ./icons
icon alias MyIcon YourIcon --dir=./iconsDisplay help
icon alias --helpNamespace
icon namespace [namespace]Sets or removes the namespace of the icons in the directory.
Prefix
namespace with @@ to use a symbol.
Omit
namespace to remove the currently set namespace.
Positionals
| Option | Description | Required | Type |
|---|---|---|---|
| namespace | The namespace to set. | no | string |
Options
| Option | Alias | Description | Required | Type |
|---|---|---|---|---|
| --dir | -d | Where your icons are stored | yes | path |
Examples
Set namespace in
./icons to the string "myNamespace".
icon namespace myNamespace --dir=./iconsSet namespace in ./icons to a symbol exported as constant MY_NAMESPACE.
icon namespace @@myNamespace --dir=./iconsRemove namespace in
./icons.
icon namespace --dir=./iconsDisplay help
icon namespace --helpUpgrade
icon upgradeUpgrades from an earlier version on
icon-manager & @eventstore-ui/components
Options
| Option | Alias | Description | Required | Type |
|---|---|---|---|---|
| --dir | -d | Where your icons are stored | yes | path |
| --force | Forces an upgrade, even if version numbers match. | boolean |
Examples
Update icon set in
./icons
icon upgrade --dir=./iconsDisplay help
icon upgrade --helpRegenerate
icon regenerateRegenerate your index from icons.json
Options
| Option | Alias | Description | Required | Type |
|---|---|---|---|---|
| --dir | -d | Where your icons are stored | yes | path |
Examples
Regenerate icon set in
./icons
icon upgrade --dir=./iconsDisplay help
icon regenerate --helpDisplay
Display icons in browser.
Options
| Option | Alias | Description | Required | Type | Default |
|---|---|---|---|---|---|
| --dir | -d | Where your icons are stored | yes | path | |
| --port | -p | Which port to host on | number | 8080 | |
| --watch | -w | Watch for changes | boolean | true |
Examples
Launch display server for icon set in
./icons, on localhost:2022, watching for changes.
icon display --dir=./icons --port 2022Don't watch for changes.
icon display --dir=./icons --watch falseDisplay help
icon display --helpPro tip
Add icon as a script in your package.json, set the directory for your project
package.json
{
"scripts": {
"icon": "icon --dir=./src/icons"
}
}usage
yarn icon add MyIcon -c