Documentation
¶
Overview ¶
Package icons provides a type-safe icon system with named constants and SVG rendering for use across all component packages.
Package icons provides constants for predefined icon names used throughout the component library.
templ: version: v0.3.1036
Index ¶
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")
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 IconPathJS ¶
IconPathJS returns the inner HTML for an SVG icon path element, suitable for use in JavaScript-generated icons.
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", 2.0)
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" 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" )
Icon name constants for use with the Icon component
Source Files