LayX
Download
Getting started
Introduction Installation Quick Start CLI
Core Concepts
Overview
Customize
Customize
Layout System
Breakpoints Container Component Layout Component
Main
Base Typography
Components
Alert Breadcrumb Button Card Carousel Chart Dialog Draggable Form Footer Media Navbar Pagination Popover Sheet Section Tab Tooltip Window
Helpers
Flex and Grid Layout
Utilities
Border Color Display Flex Grid Height Margin Opacity Padding Position Shadow Width Z-index
Others
Background Dynamic Render Icon PWA Partial Render Scroll Driven Animation Smooth Scroll Syntax Highlighter Theme View Transition
About
Contributing License
Icon

The Icon component is a lightweight, scalable solution for embedding vector graphics. It enables easy reference to SVG symbols for a consistent and customizable icon system.

Examples

Here's an example of the Icon component in action:

<svg class="icon"> <use href="/assets/image/svg/icons.svg#icon-id"></use> </svg>
How It Works

The Icon component is a simple SVG element that references symbols from the icons.svg sprite sheet located at /assets/image/svg/. To display an icon, reference its ID using the format icons.svg#icon-id.

For example:

<use href="/assets/image/svg/icons.svg#star" />
Useful Info

Key points for using and customizing the Icon component:

  • The default icon color is set to currentColor, allowing it to inherit text color and adapt to theme changes.
  • Icons are styled with height: 1em; and aspect-ratio: 1; to maintain consistent size and proportions.
  • Use CSS to override size, color, and other properties globally or on individual icons.
  • Ensure accessibility by adding aria-hidden="true" for decorative icons or role="img" with aria-label for meaningful icons.
See Example