Menu
Add or update icons in the Folio engine or a Folio host app icon set: export from Figma, place SVG in the icon source directory, normalize fills/strokes to currentColor, run bin/icons, restart Rails so sprite and YAML metadata load.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Folio and host-app testing conventions. Use when adding, changing, debugging, or reviewing tests, test helpers, factories/fixtures, mocks, stubs, ViewComponent tests, JavaScript behavior tests, integration/system coverage, or files under test/ and packs/*/test.
Folio “HTML over wire” JSON APIs: controllers use render_component_json so the response body is JSON with a string "data" key holding rendered ViewComponent HTML; JavaScript uses Folio.Api.apiGet/apiPost and response.data, not pure domain JSON for client-side rendering. Use when adding or changing render_component_json, console/API endpoints that return component fragments, or consumers of response.data as HTML.
JavaScript conventions for Folio: ES6+, StandardJS linting, DOM APIs, Folio.Api fetch wrappers, debounce/throttle, flash events, and when to use Stimulus. Use when writing or editing .js files, adding behavior to components, or when the user asks about JavaScript patterns in Folio.
Folio optional pack boundary and namespace rules. Use when editing files in optional pack directories, adding pack controllers/components/models/lib code, wiring routes to pack code, or moving reusable behavior between a host app, the Folio engine, and an optional pack, including Packwerk verification.
Build or change Folio SimpleForm inputs and extensions: app/inputs classes, SimpleForm::Inputs overrides, register_stimulus wiring, input_controls, custom_html, standalone input JS/Sass assets, and rendered HTML tests.
Slim template formatting and best practices for Folio components and views. Use when writing or editing .slim templates, reviewing Slim formatting, or when the user asks about Slim conventions, multi-line attributes, or template structure in Folio.
| name | folio-icons |
| description | Add or update icons in the Folio engine or a Folio host app icon set: export from Figma, place SVG in the icon source directory, normalize fills/strokes to currentColor, run bin/icons, restart Rails so sprite and YAML metadata load. |
Use this when adding or replacing SVGs in the shared Folio UI icon set inside this gem, or in a Folio application that ships its own icon pipeline.
The Folio engine paths below are the default reference. Host applications often
have their own bin/icons, source icon directory, generated sprite, and metadata
paths, but the add-normalize-generate-restart flow is the same. In a host app,
read that app's bin/icons first and use the paths it configures.
Export from Figma to a local file (example: ~/Downloads/creation.svg).
Copy the file to data/icons/<name>.svg. The basename without .svg is
the icon name (e.g. creation.svg → folio_icon(:creation) /
Folio.Ui.Icon.data("creation", ...)). Use the same snake_case style as
existing files (e.g. arrow_u_right_top.svg).
Normalize colors so icons inherit CSS color:
fill="black" with
fill="currentColor" on shapes that should theme.stroke="#000"
→ stroke="currentColor").fill="none" on the root <svg> unless
you deliberately want a filled canvas.Run bin/icons from the project root that owns the icon set. In the
Folio engine repository, it regenerates
app/assets/images/folio_svg_sprite.svg and data/folio_icons.yaml (do not
edit the YAML by hand). In a host application, use that app's bin/icons and
generated paths instead.
If the script exits asking for npm install, ensure
test/dummy/node_modules/.bin/svg-sprite exists (install npm dependencies
under test/dummy in this repo).
Restart the Rails dev server. Folio::Ui::IconCell::ICONS is loaded from
data/folio_icons.yaml at class load time; without a restart, new icon
names will not resolve. Hard-refresh the browser if the sprite SVG appears
cached.
bin/icons, confirm data/folio_icons.yaml contains a key matching your
basename (without .svg).Applications using Folio commonly ship their own bin/icons. Treat the local
app as the owner of its icon set: add the SVG to the app's configured icon
source directory, normalize themeable fills/strokes to currentColor, run the
app's bin/icons, and verify the generated app sprite/metadata. Do not assume
the engine filenames or data/ paths when working in a host app.