folio-icons

スター10

フォーク2

更新日2026年5月25日 06:26

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.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

ソース

sinfin

sinfin/folio

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Folio icon sets

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.

Steps

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:
- Replace hardcoded fill values such as fill="black" with fill="currentColor" on shapes that should theme.
- Do the same for stroke when the icon uses strokes (e.g. stroke="#000" → stroke="currentColor").
- Keep structural values such as 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.

Verify

After bin/icons, confirm data/folio_icons.yaml contains a key matching your basename (without .svg).
Render the icon by name in the UI or console to confirm the sprite reference.

Host apps

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.

このリポジトリの他の Skills

同じリポジトリ

folio-testing

sinfin/folio

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.

2026-07-3010

folio-component-json-api

sinfin/folio

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.

2026-07-2810

folio-javascript

sinfin/folio

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.

2026-07-2810

folio-pack

sinfin/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.

2026-07-2810

folio-simple-form-inputs

sinfin/folio

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.

2026-07-2810

folio-slim

sinfin/folio

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.

2026-07-2810

Folio icon sets

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.

Steps

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:

Replace hardcoded fill values such as fill="black" with fill="currentColor" on shapes that should theme.
Do the same for stroke when the icon uses strokes (e.g. stroke="#000" → stroke="currentColor").
Keep structural values such as 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.

Verify

After bin/icons, confirm data/folio_icons.yaml contains a key matching your basename (without .svg).

Render the icon by name in the UI or console to confirm the sprite reference.

Host apps

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.