skills.rest
johnlindquist
johnlindquistCOMMUNITY
Explore all skills by this author →
Website𝕏@johnlindquistGitHub

script-kit-icons

Parse IconRef types and configure IconView rendering for Script Kit GPUI icons.

28|6|Updated Dec 27, 2025
Search Tags:#ui#graphics#design system#rendering#icons#svg
One-click install
npx skills add https://github.com/johnlindquist/script-kit-next --skill script-kit-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: script-kit-icons
Source: https://github.com/johnlindquist/script-kit-next/tree/main/.opencode/skill/script-kit-icons
Command: npx skills add https://github.com/johnlindquist/script-kit-next --skill script-kit-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a consistent and flexible way to manage and render icons across the Script Kit application, abstracting away the complexities of different icon sources.

Core Features & Use Cases

  • Unified Icon Reference: Use a single IconRef type to represent icons from various sources (Lucide, SF Symbols, embedded SVGs, files, URLs, app bundles).
  • Flexible Rendering: Customize icon size, color, and opacity using a fluent builder API (IconView).
  • Use Case: Easily display a "settings" icon using lucide:settings or a "trash" icon using lucide:trash in your UI components, ensuring a consistent look and feel.

Quick Start

Render a large, success-colored checkmark icon using the script-kit-icons skill.

Frequently Asked Questions about script-kit-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render SVG and Lucide icons in Script Kit?▼

Use the IconView rendering API to display Lucide icons and embedded SVGs in Script Kit. It abstracts multiple icon sources into a single IconRef type, allowing you to configure size, color, and opacity through a fluent builder interface.

What is an IconRef and how does it unify icon sources?▼

An IconRef is a unified type representing icons from Lucide, SF Symbols, embedded SVGs, files, URLs, and app bundles. It abstracts away the complexities of different icon sources so you can manage them through a single reference.

Can I customize icon size and color tokens in a Script Kit UI?▼

Yes, you can customize icon size, color, and opacity in a Script Kit UI. The system supports IconStyle configuration and color tokens, allowing you to adjust icon appearance dynamically using the IconView fluent builder API.

Does Script Kit support rendering SF Symbols and app bundle icons?▼

Yes, Script Kit supports rendering SF Symbols and app bundle icons. The unified icon system parses these sources through the IconRef type, enabling consistent rendering alongside Lucide icons, embedded SVGs, and custom file or URL icons.

What is the best way to manage multiple icon formats in a design system?▼

The best way to manage multiple icon formats in a design system is to use a unified icon reference type. This system abstracts rendering for SVGs, Lucide, and SF Symbols into a single API, ensuring a consistent look and feel across UI components.

Related Skills

Explore More Software Engineering Skills→
johnlindquistjohnlindquist
28

script-kit-config

Manage Script Kit GPUI settings through a TypeScript configuration file.

Community
Intermediate
trusted-americantrusted-american

fontawesome

Register FontAwesome 7 icons and render them with the A3 Icon component.

Official
Intermediate
fyndxfyndx
1

tamagui

Build React Native screens with Tamagui UI components and design tokens.

Official
Intermediate
fellipeutakafellipeutaka
12

denji

Convert Iconify SVG icons into framework-specific typed components.

Community
Intermediate