Icon
Icon renders a class-based span, svg use reference, or text fallback.
github.com/fastygo/templ/ui
Summary
Icon renders a class-based span, svg use reference, or text fallback.Decorative icons are hidden from assistive technology by default.
Use Cases
Render navigation and toolbar icons
Render inline SVG sprite references
Semantics
Empty Title and AriaLabel make the icon decorative
Accessible icons receive role img
Example type.class
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Icon(ui.IconProps{BaseClass: "icon", Prefix: "icon-", Name: "home", Size: "sm"})
}
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Icon(ui.IconProps{BaseClass: "icon", Prefix: "icon-", Name: "home", Size: "sm"})
}Example type.svg
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Icon(ui.IconProps{Type: "svg", Href: "#check", Title: "Done"})
}
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Icon(ui.IconProps{Type: "svg", Href: "#check", Title: "Done"})
}API
BaseClass · string — role: icon-pack-base-class
Decorative · bool — role: accessibility
Href · string — role: svg-use-reference
Name · string — role: icon-name
Prefix · string — role: icon-name-prefix
Size · string — role: density; enum: xs|sm|default|lg|xl; default: default; source: ui.icon.IconVariants
Title · string — role: accessible-name
Type · string — role: render-mode; enum: class|svg|text; default: class; source: ui.icon.IconVariants