Documentation
¶
Overview ¶
Package icons provides a type-safe icon system with named constants and SVG rendering for use across all component packages.
Icon name constants — single source of truth for the icon catalogue.
templ: version: v0.3.1020
Index ¶
- func Icon(name Name, class string) templ.Component
- func IconPathData(name Name) []string
- func IconPathJS(name Name) string
- func IconRTL(name Name, class string) templ.Component
- func IconWithStrokeWidth(name Name, class string, strokeWidth float64) templ.Component
- func NameIsValid(v Name) bool
- type Name
Examples ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func Icon ¶
Icon renders an SVG icon by name with customizable class and size. All icons are 24x24 with currentColor fill/stroke for easy theming.
@icons.Icon(icons.Home, "h-5 w-5 text-gray-500 dark:text-gray-400")
Example ¶
package main
import (
"bytes"
"context"
"fmt"
"github.com/larsartmann/templ-components/icons"
)
func main() {
var buf bytes.Buffer
_ = icons.Icon(icons.Check, "h-5 w-5 text-green-500").Render(context.Background(), &buf)
fmt.Println(buf.String())
}
Output:
func IconPathData ¶ added in v0.4.0
IconPathData returns the raw SVG path d-attribute strings for the given icon. Use this when you need full control over the <svg> wrapper element (e.g. custom class, stroke-width, or viewBox). Unknown names and special icons (Spinner) fall back to Question.
for _, d := range icons.IconPathData(icons.Users) {
fmt.Printf(`<path d="%s"/>`, d)
}
func IconPathJS ¶
IconPathJS returns the inner HTML for an SVG icon path element, suitable for use in JavaScript-generated icons.
func IconRTL ¶ added in v0.13.0
IconRTL renders a directional icon that auto-mirrors in RTL contexts. Add this CSS to your stylesheet: [dir="rtl"] [data-tc-dir-icon] { transform: scaleX(-1); }
@icons.IconRTL(icons.ArrowRight, "h-4 w-4")
func IconWithStrokeWidth ¶
IconWithStrokeWidth renders an SVG icon with a custom stroke-width. The default Icon uses 1.5; use this for thicker or thinner strokes.
@icons.IconWithStrokeWidth(icons.Home, "h-5 w-5 text-gray-500 dark:text-gray-400", 2.0)
func NameIsValid ¶ added in v0.8.0
NameIsValid reports whether v is one of the defined icon names.
Types ¶
type Name ¶
type Name string
Name represents a named icon from the library.
const ( Home Name = "home" Users Name = "users" Folder Name = "folder" Document Name = "document" Search Name = "search" Settings Name = "settings" Chart Name = "chart" Inbox Name = "inbox" Check Name = "check" X Name = "x" Close Name = "x" Plus Name = "plus" Minus Name = "minus" ChevronRight Name = "chevron-right" ChevronLeft Name = "chevron-left" ChevronDown Name = "chevron-down" ChevronUp Name = "chevron-up" ArrowRight Name = "arrow-right" ArrowLeft Name = "arrow-left" Refresh Name = "refresh" ExternalLink Name = "external-link" Download Name = "download" Upload Name = "upload" Trash Name = "trash" Edit Name = "edit" Eye Name = "eye" EyeOff Name = "eye-off" Lock Name = "lock" Unlock Name = "unlock" Menu Name = "menu" Bell Name = "bell" Calendar Name = "calendar" Clock Name = "clock" Location Name = "location" Phone Name = "phone" Mail Name = "mail" Globe Name = "globe" Sun Name = "sun" Moon Name = "moon" Spinner Name = "spinner" ExclamationTriangle Name = "exclamation-triangle" CheckCircle Name = "check-circle" ExclamationCircle Name = "exclamation-circle" Information Name = "information" Question Name = "question" ArrowUp Name = "arrow-up" ArrowDown Name = "arrow-down" Bookmark Name = "bookmark" Clipboard Name = "clipboard" Cloud Name = "cloud" CodeBracket Name = "code-bracket" DocumentDuplicate Name = "document-duplicate" DocumentText Name = "document-text" EllipsisHorizontal Name = "ellipsis-horizontal" EllipsisVertical Name = "ellipsis-vertical" Filter Name = "filter" Heart Name = "heart" Link Name = "link" ListBullet Name = "list-bullet" MapPin Name = "map-pin" Microphone Name = "microphone" PaperAirplane Name = "paper-airplane" Photo Name = "photo" Printer Name = "printer" QueueList Name = "queue-list" ShieldCheck Name = "shield-check" Star Name = "star" Tag Name = "tag" ThumbUp Name = "thumb-up" UserCircle Name = "user-circle" UserPlus Name = "user-plus" Wrench Name = "wrench" XCircle Name = "x-circle" ArchiveBox Name = "archive-box" ArrowPath Name = "arrow-path" Bars3 Name = "bars-3" Beaker Name = "beaker" Bolt Name = "bolt" BugAnt Name = "bug-ant" Calculator Name = "calculator" Cube Name = "cube" FaceSmile Name = "face-smile" Fire Name = "fire" FolderOpen Name = "folder-open" Gift Name = "gift" HandThumbUp Name = "hand-thumb-up" Hashtag Name = "hashtag" PuzzlePiece Name = "puzzle-piece" RocketLaunch Name = "rocket-launch" Server Name = "server" Signal Name = "signal" Squares2x2 Name = "squares-2x2" AcademicCap Name = "academic-cap" ArrowDownOnSquare Name = "arrow-down-on-square" ArrowUpOnSquare Name = "arrow-up-on-square" BellSlash Name = "bell-slash" Camera Name = "camera" NoSymbol Name = "no-symbol" ArrowRightOnRectangle Name = "arrow-right-on-rectangle" BuildingOffice2 Name = "building-office-2" Key Name = "key" )
Icon name constants for use with the Icon component.
func AllIconNames ¶ added in v0.18.0
func AllIconNames() []Name
AllIconNames returns all available icon names, sorted alphabetically. Useful for icon galleries, demos, and documentation.
Source Files