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.