@eventstore-ui/icon-manager

Automated icon inclusion for Event Store design system.

Install

yarn add --dev @eventstore-ui/icon-manager

Usage

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.svg

Add MyIcon.tsx to ./icons from clipboard

icon add MyIcon --dir=./icons -c

Display help

icon add --help

Remove

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=./icons

Display help

icon remove --help

Alias

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=./icons

Display help

icon alias --help

Namespace

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=./icons

Set namespace in ./icons to a symbol exported as constant MY_NAMESPACE.

icon namespace @@myNamespace --dir=./icons

Remove namespace in ./icons.

icon namespace --dir=./icons

Display help

icon namespace --help

Upgrade

icon upgrade

Upgrades 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=./icons

Display help

icon upgrade --help

Regenerate

icon regenerate

Regenerate 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=./icons

Display help

icon regenerate --help

Display

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 2022

Don't watch for changes.

icon display --dir=./icons --watch false

Display help

icon display --help

Pro 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