Run this command and two svg icons will appear in your codebase immediately.
> npx @sly-cli/sly add @radix-ui/icons camera card-stack --yes --directory ./svg-icons
⠸ Adding camera...
✔ Added /svg-icons/camera.svg
⠸ Adding card-stack...
✔ Added /svg-icons/card-stack.svg
Sly is a CLI tool to add components, icons, and utilities as code, not dependencies.
With one command, or through an interactive prompt, you can choose a component from Sly's registry and it will appear in your codebase, in exactly the format it would be if you had written it yourself.
If you don't provide any flags to the CLI, Sly will walk you through choosing which libraries and components you want to add
> npx @sly-cli/sly add
✔ Which library would you like to use? › @radix-ui/icons
✔ Which components would you like to add? › camera, card-stack
✔ Add 2 components? … yes
⠸ Adding camera...
✔ Added /svg-icons/camera.svg
⠸ Adding card-stack...
✔ Added /svg-icons/card-stack.svg
Sly can add SVG files to your project, and automatically kick off a postinstall script that generates an SVG spritesheet and updates the types for your Icon component.
Use Sly to add UI components into your codebase, then run transformer functions on each to customize their colors, import paths, and more.
Grab one-off functions instead of installing a full-featured library.
If you install Sly first, run npx sly
instead of npx @sly-cli/sly
You can configure each library individually, either via the CLI or by editing the config file directly.
{
"$schema": "https://sly-cli.fly.dev/registry/config.json",
"libraries": [
{
"name": "@radix-ui/icons",
"directory": "./svg-icons",
"postinstall": ["npm" "run" "build:icons"],
"transformers": [
"sly/svg-remove-dimensions.ts",
"sly/html-prettier.ts",
"sly/html-add-license-info.js",
]
}
]
}
Before a new component is saved, Sly processes it through a pipeline of transformer functions that you can include.
For example, you could use a transformer to:
Sly does not require a config file IF you provide enough information in the command, so instead of telling you what each option does, let's go through what happens if you don’t include each option
As an example, we'll install eraser
icon from@radix-ui/icons
.
> npx @sly-cli/sly add @radix-ui/icons eraser --directory ./icons --overwrite --yes
If you don't provide --overwrite
, the installation will fail if the file already exists.
> npx @sly-cli/sly add @radix-ui/icons eraser --directory ./icons --yes
If you don't provide --yes
, you will be prompted to confirm the installation before a file is written.
> npx @sly-cli/sly add @radix-ui/icons eraser --directory ./icons
If you don't provide --directory
, Sly will look for your sly.json
file and look for the directory field under @radix-ui/icons
in the config. **If Sly can't find that config file, you will be asked which directory you want to install the icon to** and Sly will create asly.json
file for you.
> npx @sly-cli/sly add @radix-ui/icons eraser
If you don't provide a component name like eraser
, **Sly will show you a list of all the icons available** in @radix-ui/icons
and ask you to select the ones you want.
> npx @sly-cli/sly add @radix-ui/icons
If you don't provide @radix-ui/icons
, Sly will show you a list of all the libraries you've configured and ask you to select the one you want before proceeding to show you the list of icons.
> npx @sly-cli/sly add
If you don't provide add, you're at the root of the CLI and will get a help menu
> npx @sly-cli/sly
If you don't provide @sly-cli/sly
, it might be because you've installed Sly already and you can just run sly
directly.
Sly is free and open source.
If you have your own proprietary component library, you can host your own registry and share code across your organization using Sly
Add Sly to your project and
> npm i --save-dev @sly-cli/sly
> npx sly add
made with ❤️ by @jacobmparis