Does the skill handle icon ordering?

Yes, the skill ensures that icon names are added to the renderer/icons.json array in alphabetical order to maintain project cleanliness.

Which icon library does this skill support?

This skill is specifically configured to work with Tabler Icons, primarily utilizing the outline style via the @tabler/icons npm package.

How are icons referenced in the Rust code?

Icons are added as PascalCase variants to the IconName enum in the desktop component layer and are rendered using the Dioxus asset! macro.

Does this skill require manual SVG editing?

No, the skill follows a configuration-first approach where you update JSON and Rust files, and the actual SVG sprite is automatically generated by a Vite plugin.

Where is the final icon sprite located?

The sprite is generated at renderer/public/icons/tabler-sprite.svg and moved to assets/dist/icons/ during the Vite build process.

Arto Icon Integration

Name: Arto Icon Integration
Author: arto-app

byarto-app

•

125

•

Design Tools

Automates the multi-step process of adding and configuring Tabler icons within the Arto project's Rust and Vite architecture.

The Arto Icon Integration skill streamlines UI development by managing the end-to-end workflow for adding new iconography. It guides Claude through updating the icons.json configuration with proper alphabetical ordering, synchronizing the Rust IconName enum variants for type safety, and ensuring the Vite-based sprite generation process is correctly triggered. This skill is essential for maintaining consistency between the frontend asset pipeline and the Rust desktop component layer, preventing manual errors in SVG handling and enum implementation.

Key Features

01Enforcement of alphabetical sorting for configuration files

02Support for automated Vite SVG sprite generation workflows

03Integration with Dioxus asset macro for type-safe icon referencing

04Synchronization of Rust IconName enum variants and Display traits

05Automated Tabler icon registration in icons.json

06125 GitHub stars

Use Cases

01Expanding the UI component library with new visual indicators

02Maintaining type-safe icon references in a Rust-based desktop application

03Refactoring existing icons to match updated design requirements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add arto-app/arto add-icon

For use in Claude.ai and ChatGPT

Download Skill