skills.rest
SandroBeatz
SandroBeatzCOMMUNITY
Explore all skills by this author →
GitHub

icon-usage

Guide integration and usage of the Icon component from @shared/ui in Layrix.

Updated Dec 22, 2025
Search Tags:#best practices#ui component#quasar#icon integration#tabler icons
One-click install
npx skills add https://github.com/SandroBeatz/layrix --skill icon-usage-sandrobeatz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icon-usage
Source: https://github.com/SandroBeatz/layrix/tree/main/.claude/skills/icon-usage
Command: npx skills add https://github.com/SandroBeatz/layrix --skill icon-usage-sandrobeatz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires quasar, tabler-icons-v2, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide for integrating and using icons in the Layrix application, ensuring consistency and best practices in design.

Core Features & Use Cases

  • Icon Usage Patterns: Covers all usage patterns, sizes, colors, and best practices for the Icon component.
  • Component Import: Offers guidance on how to import and use the Icon component effectively.
  • Best Practices: Highlights critical rules and best practices for icon usage in the Layrix application.

Quick Start

Use the icon-usage skill to add the 'tabHome' icon to any component in your Layrix application.

Frequently Asked Questions about icon-usage

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

FAQPage Schema
How do I integrate Tabler Icons v2 into a Quasar application?▼

Tabler Icons v2 integration in a Quasar application is achieved by importing the Icon component from @shared/ui. This guide provides the usage patterns, sizes, and color configurations required for implementation.

What are the best practices for UI component icon usage in Layrix?▼

Best practices for icon usage in Layrix involve following specific rules for sizing, coloring, and importing the Icon component from @shared/ui. Consistent application of these patterns ensures design uniformity across the application.

Do I need Quasar and Tabler Icons installed to use the Layrix icon component?▼

Yes, both Quasar and Tabler Icons v2 are required dependencies for using the Layrix icon component. The guide assumes these frameworks are present to provide accurate import and usage patterns.

What is the best way to import and display icons in a Layrix component?▼

The best way to display icons in Layrix is by importing the Icon component from @shared/ui and applying the documented usage patterns. This method ensures proper rendering and adherence to application design standards.

How do I configure icon sizes and colors using the Layrix UI component?▼

Icon sizes and colors are configured through the properties of the Icon component imported from @shared/ui. The guide details the specific usage patterns and best practices for applying these visual attributes.

Related Skills

Explore More Design & Creative Skills→
SandroBeatzSandroBeatz

icons

Select and integrate Tabler Icons v2 into Quasar components.

Community
Basic
SandroBeatzSandroBeatz

list-usage

Documents usage of List and ListItem components for Vue/Qasar in-app layouts.

Community
Intermediate
SandroBeatzSandroBeatz

new-component

Generate Vue/Quasar component structures with TypeScript interfaces and barrel exports.

Community
Intermediate
wukangcheng2944wukangcheng2944

icon-finder

Search six Iconify libraries and deliver icons as SVG or components.

Community
Intermediate