├── .env.example ├── .gitignore ├── .templui.json ├── Dockerfile ├── LICENSE ├── Makefile ├── README.md ├── assets ├── assets.go └── css │ ├── input.css │ └── output.css ├── go.mod ├── go.sum ├── main.go ├── ui ├── components │ ├── button │ │ └── button.templ │ └── icon │ │ ├── icon.go │ │ ├── icondata.go │ │ └── icondefs.go ├── layouts │ └── base.templ ├── modules │ ├── navbar.templ │ └── themeswitcher.templ └── pages │ └── landing.templ └── utils └── templui.go /.env.example: -------------------------------------------------------------------------------- 1 | GO_ENV=development -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *_templ.go 2 | *_templ.txt 3 | .DS_Store 4 | bin 5 | node_modules 6 | tmp 7 | .env 8 | -------------------------------------------------------------------------------- /.templui.json: -------------------------------------------------------------------------------- 1 | { 2 | "componentsDir": "ui/components", 3 | "utilsDir": "utils", 4 | "moduleName": "github.com/axzilla/templui-quickstart", 5 | "jsDir": "assets/js/components" 6 | } -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # Build-Stage 2 | FROM golang:1.24-alpine AS build 3 | WORKDIR /app 4 | 5 | # Copy the source code 6 | COPY . . 7 | 8 | # Install templ 9 | RUN go install github.com/a-h/templ/cmd/templ@latest 10 | 11 | # Generate templ files 12 | RUN templ generate 13 | 14 | # Install build dependencies 15 | RUN apk add --no-cache gcc musl-dev 16 | 17 | # Build the application 18 | RUN CGO_ENABLED=1 GOOS=linux go build -o main ./main.go 19 | 20 | # Deploy-Stage 21 | FROM alpine:3.20.2 22 | WORKDIR /app 23 | 24 | # Install ca-certificates 25 | RUN apk add --no-cache ca-certificates 26 | 27 | # Set environment variable for runtime 28 | ENV GO_ENV=production 29 | 30 | # Copy the binary from the build stage 31 | COPY --from=build /app/main . 32 | 33 | # Expose the port your application runs on 34 | EXPOSE 8090 35 | 36 | # Command to run the application 37 | CMD ["./main"] 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Axel Adrian 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # Run templ generation in watch mode to detect all .templ files and 2 | # re-create _templ.txt files on change, then send reload event to browser. 3 | # Default url: http://localhost:7331 4 | templ: 5 | templ generate --watch --proxy="http://localhost:8090" --open-browser=false 6 | 7 | # Run air to detect any go file changes to re-build and re-run the server. 8 | server: 9 | air \ 10 | --build.cmd "go build -o tmp/bin/main ./main.go" \ 11 | --build.bin "tmp/bin/main" \ 12 | --build.delay "100" \ 13 | --build.exclude_dir "node_modules" \ 14 | --build.include_ext "go" \ 15 | --build.stop_on_error "false" \ 16 | --misc.clean_on_exit true 17 | 18 | tailwind-clean: 19 | tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --clean 20 | 21 | # Run tailwindcss to generate the styles.css bundle in watch mode. 22 | tailwind-watch: 23 | tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch 24 | 25 | # Start development server 26 | dev: 27 | make tailwind-clean 28 | make -j3 tailwind-watch templ server 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # templUI Quickstart 2 | 3 | Get started with templUI, an enterprise-ready UI component library for Go and templ. This template provides a pre-configured setup for building professional web applications with templUI components. 4 | 5 | ## Installation 6 | 7 | For installation instructions, visit our [documentation](https://templui.io/docs/how-to-use#requirements). 8 | 9 | ## Setup 10 | 11 | 1. **Clone the Repository** 12 | 13 | ```bash 14 | git clone https://github.com/axzilla/templui-quickstart.git 15 | cd templui-quickstart 16 | ``` 17 | 18 | 2. **Install Dependencies** 19 | 20 | ```bash 21 | go mod tidy 22 | ``` 23 | 24 | ## Development 25 | 26 | Start the development server with hot reload: 27 | 28 | ```bash 29 | make dev 30 | ``` 31 | 32 | Your application will be running at [http://localhost:7331](http://localhost:7331) 33 | 34 | ## Deployment 35 | 36 | This template includes a production-ready Dockerfile for easy deployment: 37 | 38 | ```bash 39 | # Build the image 40 | docker build -t templui-app . 41 | 42 | # Run the container 43 | docker run -p 8090:8090 templui-app 44 | ``` 45 | 46 | Your application will be available at `http://localhost:8090` 47 | 48 | ## Contributing 49 | 50 | Issues and pull requests are welcome! Please read our [contributing guidelines](https://github.com/axzilla/templui/blob/main/CONTRIBUTING.md) before submitting a pull request. 51 | 52 | ## License 53 | 54 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 55 | -------------------------------------------------------------------------------- /assets/assets.go: -------------------------------------------------------------------------------- 1 | package assets 2 | 3 | import "embed" 4 | 5 | //go:embed css/* 6 | var Assets embed.FS 7 | -------------------------------------------------------------------------------- /assets/css/input.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | @custom-variant dark (&:where(.dark, .dark *)); 4 | 5 | @theme inline { 6 | --color-border: var(--border); 7 | --color-input: var(--input); 8 | --color-background: var(--background); 9 | --color-foreground: var(--foreground); 10 | --color-primary: var(--primary); 11 | --color-primary-foreground: var(--primary-foreground); 12 | --color-secondary: var(--secondary); 13 | --color-secondary-foreground: var(--secondary-foreground); 14 | --color-destructive: var(--destructive); 15 | --color-destructive-foreground: var(--destructive-foreground); 16 | --color-muted: var(--muted); 17 | --color-muted-foreground: var(--muted-foreground); 18 | --color-accent: var(--accent); 19 | --color-accent-foreground: var(---accent-foreground); 20 | --color-popover: var(--popover); 21 | --color-popover-foreground: var(--popover-foreground); 22 | --color-card: var(--card); 23 | --color-card-foreground: var(--card-foreground); 24 | --color-ring: var(--ring); 25 | 26 | --radius-sm: calc(var(--radius) - 4px); 27 | --radius-md: calc(var(--radius) - 2px); 28 | --radius-lg: var(--radius); 29 | 30 | --container-2xl: 1400px; 31 | } 32 | 33 | :root { 34 | --background: hsl(0 0% 100%); 35 | --foreground: hsl(240 10% 3.9%); 36 | --muted: hsl(240 4.8% 95.9%); 37 | --muted-foreground: hsl(240 3.8% 46.1%); 38 | --popover: hsl(0 0% 100%); 39 | --popover-foreground: hsl(240 10% 3.9%); 40 | --card: hsl(0 0% 100%); 41 | --card-foreground: hsl(240 10% 3.9%); 42 | --border: hsl(240 5.9% 90%); 43 | --input: hsl(240 5.9% 90%); 44 | --primary: hsl(240 5.9% 10%); 45 | --primary-foreground: hsl(0 0% 98%); 46 | --secondary: hsl(240 4.8% 95.9%); 47 | --secondary-foreground: hsl(240 5.9% 10%); 48 | --accent: hsl(240 4.8% 95.9%); 49 | --accent-foreground: hsl(240 5.9% 10%); 50 | --destructive: hsl(0 84.2% 60.2%); 51 | --destructive-foreground: hsl(0 0% 98%); 52 | --ring: hsl(240 5.9% 10%); 53 | --radius: 0.5rem; 54 | } 55 | 56 | .dark { 57 | --background: hsl(240 10% 3.9%); 58 | --foreground: hsl(0 0% 98%); 59 | --muted: hsl(240 3.7% 15.9%); 60 | --muted-foreground: hsl(240 5% 64.9%); 61 | --popover: hsl(240 10% 3.9%); 62 | --popover-foreground: hsl(0 0% 98%); 63 | --card: hsl(240 10% 3.9%); 64 | --card-foreground: hsl(0 0% 98%); 65 | --border: hsl(240 3.7% 15.9%); 66 | --input: hsl(240 3.7% 15.9%); 67 | --primary: hsl(0 0% 98%); 68 | --primary-foreground: hsl(240 5.9% 10%); 69 | --secondary: hsl(240 3.7% 15.9%); 70 | --secondary-foreground: hsl(0 0% 98%); 71 | --accent: hsl(240 3.7% 15.9%); 72 | --accent-foreground: hsl(0 0% 98%); 73 | --destructive: hsl(0 62.8% 30.6%); 74 | --destructive-foreground: hsl(0 0% 98%); 75 | --ring: hsl(240 4.9% 83.9%); 76 | --radius: 0.5rem; 77 | } 78 | 79 | @layer base { 80 | * { 81 | @apply border-border; 82 | } 83 | 84 | body { 85 | @apply bg-background text-foreground; 86 | font-feature-settings: 87 | "rlig" 1, 88 | "calt" 1; 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /assets/css/output.css: -------------------------------------------------------------------------------- 1 | /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */ 2 | @layer properties; 3 | @layer theme, base, components, utilities; 4 | @layer theme { 5 | :root, :host { 6 | --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", 7 | "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 8 | --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", 9 | "Courier New", monospace; 10 | --color-red-500: oklch(63.7% 0.237 25.331); 11 | --color-green-500: oklch(72.3% 0.219 149.579); 12 | --color-blue-500: oklch(62.3% 0.214 259.815); 13 | --color-gray-300: oklch(87.2% 0.01 258.338); 14 | --color-black: #000; 15 | --color-white: #fff; 16 | --spacing: 0.25rem; 17 | --container-3xl: 48rem; 18 | --text-sm: 0.875rem; 19 | --text-sm--line-height: calc(1.25 / 0.875); 20 | --text-lg: 1.125rem; 21 | --text-lg--line-height: calc(1.75 / 1.125); 22 | --text-4xl: 2.25rem; 23 | --text-4xl--line-height: calc(2.5 / 2.25); 24 | --font-weight-medium: 500; 25 | --font-weight-bold: 700; 26 | --default-transition-duration: 150ms; 27 | --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 28 | --default-font-family: var(--font-sans); 29 | --default-mono-font-family: var(--font-mono); 30 | } 31 | } 32 | @layer base { 33 | *, ::after, ::before, ::backdrop, ::file-selector-button { 34 | box-sizing: border-box; 35 | margin: 0; 36 | padding: 0; 37 | border: 0 solid; 38 | } 39 | html, :host { 40 | line-height: 1.5; 41 | -webkit-text-size-adjust: 100%; 42 | tab-size: 4; 43 | font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); 44 | font-feature-settings: var(--default-font-feature-settings, normal); 45 | font-variation-settings: var(--default-font-variation-settings, normal); 46 | -webkit-tap-highlight-color: transparent; 47 | } 48 | hr { 49 | height: 0; 50 | color: inherit; 51 | border-top-width: 1px; 52 | } 53 | abbr:where([title]) { 54 | -webkit-text-decoration: underline dotted; 55 | text-decoration: underline dotted; 56 | } 57 | h1, h2, h3, h4, h5, h6 { 58 | font-size: inherit; 59 | font-weight: inherit; 60 | } 61 | a { 62 | color: inherit; 63 | -webkit-text-decoration: inherit; 64 | text-decoration: inherit; 65 | } 66 | b, strong { 67 | font-weight: bolder; 68 | } 69 | code, kbd, samp, pre { 70 | font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); 71 | font-feature-settings: var(--default-mono-font-feature-settings, normal); 72 | font-variation-settings: var(--default-mono-font-variation-settings, normal); 73 | font-size: 1em; 74 | } 75 | small { 76 | font-size: 80%; 77 | } 78 | sub, sup { 79 | font-size: 75%; 80 | line-height: 0; 81 | position: relative; 82 | vertical-align: baseline; 83 | } 84 | sub { 85 | bottom: -0.25em; 86 | } 87 | sup { 88 | top: -0.5em; 89 | } 90 | table { 91 | text-indent: 0; 92 | border-color: inherit; 93 | border-collapse: collapse; 94 | } 95 | :-moz-focusring { 96 | outline: auto; 97 | } 98 | progress { 99 | vertical-align: baseline; 100 | } 101 | summary { 102 | display: list-item; 103 | } 104 | ol, ul, menu { 105 | list-style: none; 106 | } 107 | img, svg, video, canvas, audio, iframe, embed, object { 108 | display: block; 109 | vertical-align: middle; 110 | } 111 | img, video { 112 | max-width: 100%; 113 | height: auto; 114 | } 115 | button, input, select, optgroup, textarea, ::file-selector-button { 116 | font: inherit; 117 | font-feature-settings: inherit; 118 | font-variation-settings: inherit; 119 | letter-spacing: inherit; 120 | color: inherit; 121 | border-radius: 0; 122 | background-color: transparent; 123 | opacity: 1; 124 | } 125 | :where(select:is([multiple], [size])) optgroup { 126 | font-weight: bolder; 127 | } 128 | :where(select:is([multiple], [size])) optgroup option { 129 | padding-inline-start: 20px; 130 | } 131 | ::file-selector-button { 132 | margin-inline-end: 4px; 133 | } 134 | ::placeholder { 135 | opacity: 1; 136 | } 137 | @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { 138 | ::placeholder { 139 | color: currentcolor; 140 | @supports (color: color-mix(in lab, red, red)) { 141 | color: color-mix(in oklab, currentcolor 50%, transparent); 142 | } 143 | } 144 | } 145 | textarea { 146 | resize: vertical; 147 | } 148 | ::-webkit-search-decoration { 149 | -webkit-appearance: none; 150 | } 151 | ::-webkit-date-and-time-value { 152 | min-height: 1lh; 153 | text-align: inherit; 154 | } 155 | ::-webkit-datetime-edit { 156 | display: inline-flex; 157 | } 158 | ::-webkit-datetime-edit-fields-wrapper { 159 | padding: 0; 160 | } 161 | ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { 162 | padding-block: 0; 163 | } 164 | :-moz-ui-invalid { 165 | box-shadow: none; 166 | } 167 | button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { 168 | appearance: button; 169 | } 170 | ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { 171 | height: auto; 172 | } 173 | [hidden]:where(:not([hidden="until-found"])) { 174 | display: none !important; 175 | } 176 | } 177 | @layer utilities { 178 | .container { 179 | width: 100%; 180 | @media (width >= 40rem) { 181 | max-width: 40rem; 182 | } 183 | @media (width >= 48rem) { 184 | max-width: 48rem; 185 | } 186 | @media (width >= 64rem) { 187 | max-width: 64rem; 188 | } 189 | @media (width >= 80rem) { 190 | max-width: 80rem; 191 | } 192 | @media (width >= 96rem) { 193 | max-width: 96rem; 194 | } 195 | } 196 | .mx-auto { 197 | margin-inline: auto; 198 | } 199 | .mt-4 { 200 | margin-top: calc(var(--spacing) * 4); 201 | } 202 | .block { 203 | display: block; 204 | } 205 | .flex { 206 | display: flex; 207 | } 208 | .inline-flex { 209 | display: inline-flex; 210 | } 211 | .table { 212 | display: table; 213 | } 214 | .h-10 { 215 | height: calc(var(--spacing) * 10); 216 | } 217 | .h-full { 218 | height: 100%; 219 | } 220 | .min-h-screen { 221 | min-height: 100vh; 222 | } 223 | .w-10 { 224 | width: calc(var(--spacing) * 10); 225 | } 226 | .w-full { 227 | width: 100%; 228 | } 229 | .max-w-3xl { 230 | max-width: var(--container-3xl); 231 | } 232 | .shrink { 233 | flex-shrink: 1; 234 | } 235 | .scale-3d { 236 | scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); 237 | } 238 | .cursor-pointer { 239 | cursor: pointer; 240 | } 241 | .columns-2 { 242 | columns: 2; 243 | } 244 | .columns-3 { 245 | columns: 3; 246 | } 247 | .columns-4 { 248 | columns: 4; 249 | } 250 | .flex-col { 251 | flex-direction: column; 252 | } 253 | .items-center { 254 | align-items: center; 255 | } 256 | .justify-center { 257 | justify-content: center; 258 | } 259 | .justify-end { 260 | justify-content: flex-end; 261 | } 262 | .gap-3 { 263 | gap: calc(var(--spacing) * 3); 264 | } 265 | .gap-6 { 266 | gap: calc(var(--spacing) * 6); 267 | } 268 | .space-y-4 { 269 | :where(& > :not(:last-child)) { 270 | --tw-space-y-reverse: 0; 271 | margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); 272 | margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); 273 | } 274 | } 275 | .rounded-md { 276 | border-radius: calc(var(--radius) - 2px); 277 | } 278 | .border { 279 | border-style: var(--tw-border-style); 280 | border-width: 1px; 281 | } 282 | .border-b { 283 | border-bottom-style: var(--tw-border-style); 284 | border-bottom-width: 1px; 285 | } 286 | .border-input { 287 | border-color: var(--input); 288 | } 289 | .bg-background { 290 | background-color: var(--background); 291 | } 292 | .bg-destructive { 293 | background-color: var(--destructive); 294 | } 295 | .bg-gray-300 { 296 | background-color: var(--color-gray-300); 297 | } 298 | .bg-green-500 { 299 | background-color: var(--color-green-500); 300 | } 301 | .bg-primary { 302 | background-color: var(--primary); 303 | } 304 | .bg-red-500 { 305 | background-color: var(--color-red-500); 306 | } 307 | .bg-secondary { 308 | background-color: var(--secondary); 309 | } 310 | .bg-white { 311 | background-color: var(--color-white); 312 | } 313 | .px-4 { 314 | padding-inline: calc(var(--spacing) * 4); 315 | } 316 | .py-2 { 317 | padding-block: calc(var(--spacing) * 2); 318 | } 319 | .py-3 { 320 | padding-block: calc(var(--spacing) * 3); 321 | } 322 | .py-16 { 323 | padding-block: calc(var(--spacing) * 16); 324 | } 325 | .text-center { 326 | text-align: center; 327 | } 328 | .text-4xl { 329 | font-size: var(--text-4xl); 330 | line-height: var(--tw-leading, var(--text-4xl--line-height)); 331 | } 332 | .text-lg { 333 | font-size: var(--text-lg); 334 | line-height: var(--tw-leading, var(--text-lg--line-height)); 335 | } 336 | .text-sm { 337 | font-size: var(--text-sm); 338 | line-height: var(--tw-leading, var(--text-sm--line-height)); 339 | } 340 | .font-bold { 341 | --tw-font-weight: var(--font-weight-bold); 342 | font-weight: var(--font-weight-bold); 343 | } 344 | .font-medium { 345 | --tw-font-weight: var(--font-weight-medium); 346 | font-weight: var(--font-weight-medium); 347 | } 348 | .whitespace-nowrap { 349 | white-space: nowrap; 350 | } 351 | .text-black { 352 | color: var(--color-black); 353 | } 354 | .text-destructive-foreground { 355 | color: var(--destructive-foreground); 356 | } 357 | .text-muted-foreground { 358 | color: var(--muted-foreground); 359 | } 360 | .text-primary { 361 | color: var(--primary); 362 | } 363 | .text-primary-foreground { 364 | color: var(--primary-foreground); 365 | } 366 | .text-secondary-foreground { 367 | color: var(--secondary-foreground); 368 | } 369 | .text-white { 370 | color: var(--color-white); 371 | } 372 | .italic { 373 | font-style: italic; 374 | } 375 | .underline { 376 | text-decoration-line: underline; 377 | } 378 | .underline-offset-4 { 379 | text-underline-offset: 4px; 380 | } 381 | .ring-offset-background { 382 | --tw-ring-offset-color: var(--background); 383 | } 384 | .outline { 385 | outline-style: var(--tw-outline-style); 386 | outline-width: 1px; 387 | } 388 | .transition-colors { 389 | transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; 390 | transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); 391 | transition-duration: var(--tw-duration, var(--default-transition-duration)); 392 | } 393 | .hover\:bg-accent { 394 | &:hover { 395 | @media (hover: hover) { 396 | background-color: var(--accent); 397 | } 398 | } 399 | } 400 | .hover\:bg-blue-500 { 401 | &:hover { 402 | @media (hover: hover) { 403 | background-color: var(--color-blue-500); 404 | } 405 | } 406 | } 407 | .hover\:bg-destructive\/90 { 408 | &:hover { 409 | @media (hover: hover) { 410 | background-color: var(--destructive); 411 | @supports (color: color-mix(in lab, red, red)) { 412 | background-color: color-mix(in oklab, var(--destructive) 90%, transparent); 413 | } 414 | } 415 | } 416 | } 417 | .hover\:bg-primary\/90 { 418 | &:hover { 419 | @media (hover: hover) { 420 | background-color: var(--primary); 421 | @supports (color: color-mix(in lab, red, red)) { 422 | background-color: color-mix(in oklab, var(--primary) 90%, transparent); 423 | } 424 | } 425 | } 426 | } 427 | .hover\:bg-secondary\/80 { 428 | &:hover { 429 | @media (hover: hover) { 430 | background-color: var(--secondary); 431 | @supports (color: color-mix(in lab, red, red)) { 432 | background-color: color-mix(in oklab, var(--secondary) 80%, transparent); 433 | } 434 | } 435 | } 436 | } 437 | .hover\:text-accent-foreground { 438 | &:hover { 439 | @media (hover: hover) { 440 | color: var(---accent-foreground); 441 | } 442 | } 443 | } 444 | .hover\:underline { 445 | &:hover { 446 | @media (hover: hover) { 447 | text-decoration-line: underline; 448 | } 449 | } 450 | } 451 | .focus\:ring-ring { 452 | &:focus { 453 | --tw-ring-color: var(--ring); 454 | } 455 | } 456 | .focus-visible\:ring-2 { 457 | &:focus-visible { 458 | --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); 459 | box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); 460 | } 461 | } 462 | .focus-visible\:ring-offset-2 { 463 | &:focus-visible { 464 | --tw-ring-offset-width: 2px; 465 | --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); 466 | } 467 | } 468 | .focus-visible\:outline-hidden { 469 | &:focus-visible { 470 | --tw-outline-style: none; 471 | outline-style: none; 472 | @media (forced-colors: active) { 473 | outline: 2px solid transparent; 474 | outline-offset: 2px; 475 | } 476 | } 477 | } 478 | .disabled\:cursor-not-allowed { 479 | &:disabled { 480 | cursor: not-allowed; 481 | } 482 | } 483 | .disabled\:opacity-50 { 484 | &:disabled { 485 | opacity: 50%; 486 | } 487 | } 488 | } 489 | :root { 490 | --background: hsl(0 0% 100%); 491 | --foreground: hsl(240 10% 3.9%); 492 | --muted: hsl(240 4.8% 95.9%); 493 | --muted-foreground: hsl(240 3.8% 46.1%); 494 | --popover: hsl(0 0% 100%); 495 | --popover-foreground: hsl(240 10% 3.9%); 496 | --card: hsl(0 0% 100%); 497 | --card-foreground: hsl(240 10% 3.9%); 498 | --border: hsl(240 5.9% 90%); 499 | --input: hsl(240 5.9% 90%); 500 | --primary: hsl(240 5.9% 10%); 501 | --primary-foreground: hsl(0 0% 98%); 502 | --secondary: hsl(240 4.8% 95.9%); 503 | --secondary-foreground: hsl(240 5.9% 10%); 504 | --accent: hsl(240 4.8% 95.9%); 505 | --accent-foreground: hsl(240 5.9% 10%); 506 | --destructive: hsl(0 84.2% 60.2%); 507 | --destructive-foreground: hsl(0 0% 98%); 508 | --ring: hsl(240 5.9% 10%); 509 | --radius: 0.5rem; 510 | } 511 | .dark { 512 | --background: hsl(240 10% 3.9%); 513 | --foreground: hsl(0 0% 98%); 514 | --muted: hsl(240 3.7% 15.9%); 515 | --muted-foreground: hsl(240 5% 64.9%); 516 | --popover: hsl(240 10% 3.9%); 517 | --popover-foreground: hsl(0 0% 98%); 518 | --card: hsl(240 10% 3.9%); 519 | --card-foreground: hsl(0 0% 98%); 520 | --border: hsl(240 3.7% 15.9%); 521 | --input: hsl(240 3.7% 15.9%); 522 | --primary: hsl(0 0% 98%); 523 | --primary-foreground: hsl(240 5.9% 10%); 524 | --secondary: hsl(240 3.7% 15.9%); 525 | --secondary-foreground: hsl(0 0% 98%); 526 | --accent: hsl(240 3.7% 15.9%); 527 | --accent-foreground: hsl(0 0% 98%); 528 | --destructive: hsl(0 62.8% 30.6%); 529 | --destructive-foreground: hsl(0 0% 98%); 530 | --ring: hsl(240 4.9% 83.9%); 531 | --radius: 0.5rem; 532 | } 533 | @layer base { 534 | * { 535 | border-color: var(--border); 536 | } 537 | body { 538 | background-color: var(--background); 539 | color: var(--foreground); 540 | font-feature-settings: "rlig" 1, "calt" 1; 541 | } 542 | } 543 | @property --tw-scale-x { 544 | syntax: "*"; 545 | inherits: false; 546 | initial-value: 1; 547 | } 548 | @property --tw-scale-y { 549 | syntax: "*"; 550 | inherits: false; 551 | initial-value: 1; 552 | } 553 | @property --tw-scale-z { 554 | syntax: "*"; 555 | inherits: false; 556 | initial-value: 1; 557 | } 558 | @property --tw-space-y-reverse { 559 | syntax: "*"; 560 | inherits: false; 561 | initial-value: 0; 562 | } 563 | @property --tw-border-style { 564 | syntax: "*"; 565 | inherits: false; 566 | initial-value: solid; 567 | } 568 | @property --tw-font-weight { 569 | syntax: "*"; 570 | inherits: false; 571 | } 572 | @property --tw-outline-style { 573 | syntax: "*"; 574 | inherits: false; 575 | initial-value: solid; 576 | } 577 | @property --tw-shadow { 578 | syntax: "*"; 579 | inherits: false; 580 | initial-value: 0 0 #0000; 581 | } 582 | @property --tw-shadow-color { 583 | syntax: "*"; 584 | inherits: false; 585 | } 586 | @property --tw-shadow-alpha { 587 | syntax: ""; 588 | inherits: false; 589 | initial-value: 100%; 590 | } 591 | @property --tw-inset-shadow { 592 | syntax: "*"; 593 | inherits: false; 594 | initial-value: 0 0 #0000; 595 | } 596 | @property --tw-inset-shadow-color { 597 | syntax: "*"; 598 | inherits: false; 599 | } 600 | @property --tw-inset-shadow-alpha { 601 | syntax: ""; 602 | inherits: false; 603 | initial-value: 100%; 604 | } 605 | @property --tw-ring-color { 606 | syntax: "*"; 607 | inherits: false; 608 | } 609 | @property --tw-ring-shadow { 610 | syntax: "*"; 611 | inherits: false; 612 | initial-value: 0 0 #0000; 613 | } 614 | @property --tw-inset-ring-color { 615 | syntax: "*"; 616 | inherits: false; 617 | } 618 | @property --tw-inset-ring-shadow { 619 | syntax: "*"; 620 | inherits: false; 621 | initial-value: 0 0 #0000; 622 | } 623 | @property --tw-ring-inset { 624 | syntax: "*"; 625 | inherits: false; 626 | } 627 | @property --tw-ring-offset-width { 628 | syntax: ""; 629 | inherits: false; 630 | initial-value: 0px; 631 | } 632 | @property --tw-ring-offset-color { 633 | syntax: "*"; 634 | inherits: false; 635 | initial-value: #fff; 636 | } 637 | @property --tw-ring-offset-shadow { 638 | syntax: "*"; 639 | inherits: false; 640 | initial-value: 0 0 #0000; 641 | } 642 | @layer properties { 643 | @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { 644 | *, ::before, ::after, ::backdrop { 645 | --tw-scale-x: 1; 646 | --tw-scale-y: 1; 647 | --tw-scale-z: 1; 648 | --tw-space-y-reverse: 0; 649 | --tw-border-style: solid; 650 | --tw-font-weight: initial; 651 | --tw-outline-style: solid; 652 | --tw-shadow: 0 0 #0000; 653 | --tw-shadow-color: initial; 654 | --tw-shadow-alpha: 100%; 655 | --tw-inset-shadow: 0 0 #0000; 656 | --tw-inset-shadow-color: initial; 657 | --tw-inset-shadow-alpha: 100%; 658 | --tw-ring-color: initial; 659 | --tw-ring-shadow: 0 0 #0000; 660 | --tw-inset-ring-color: initial; 661 | --tw-inset-ring-shadow: 0 0 #0000; 662 | --tw-ring-inset: initial; 663 | --tw-ring-offset-width: 0px; 664 | --tw-ring-offset-color: #fff; 665 | --tw-ring-offset-shadow: 0 0 #0000; 666 | } 667 | } 668 | } 669 | -------------------------------------------------------------------------------- /go.mod: -------------------------------------------------------------------------------- 1 | module github.com/axzilla/templui-quickstart 2 | 3 | go 1.24.0 4 | 5 | require ( 6 | github.com/a-h/templ v0.3.865 7 | github.com/joho/godotenv v1.5.1 8 | ) 9 | 10 | require github.com/Oudwins/tailwind-merge-go v0.2.0 11 | -------------------------------------------------------------------------------- /go.sum: -------------------------------------------------------------------------------- 1 | github.com/Oudwins/tailwind-merge-go v0.2.0 h1:rtVHgYmLwwae4P+K6//ceRuUdyz3Bny6fo4664fOEmo= 2 | github.com/Oudwins/tailwind-merge-go v0.2.0/go.mod h1:kkZodgOPvZQ8f7SIrlWkG/w1g9JTbtnptnePIh3V72U= 3 | github.com/a-h/templ v0.3.865 h1:nYn5EWm9EiXaDgWcMQaKiKvrydqgxDUtT1+4zU2C43A= 4 | github.com/a-h/templ v0.3.865/go.mod h1:oLBbZVQ6//Q6zpvSMPTuBK0F3qOtBdFBcGRspcT+VNQ= 5 | github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c= 6 | github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= 7 | github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI= 8 | github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY= 9 | github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0= 10 | github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4= 11 | github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM= 12 | github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4= 13 | github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg= 14 | github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY= 15 | gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA= 16 | gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM= 17 | -------------------------------------------------------------------------------- /main.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "fmt" 5 | "net/http" 6 | "os" 7 | 8 | "github.com/a-h/templ" 9 | "github.com/axzilla/templui-quickstart/assets" 10 | "github.com/axzilla/templui-quickstart/ui/pages" 11 | "github.com/joho/godotenv" 12 | ) 13 | 14 | func main() { 15 | InitDotEnv() 16 | mux := http.NewServeMux() 17 | SetupAssetsRoutes(mux) 18 | mux.Handle("GET /", templ.Handler(pages.Landing())) 19 | fmt.Println("Server is running on http://localhost:8090") 20 | http.ListenAndServe(":8090", mux) 21 | } 22 | 23 | func InitDotEnv() { 24 | err := godotenv.Load() 25 | if err != nil { 26 | fmt.Println("Error loading .env file") 27 | } 28 | } 29 | 30 | func SetupAssetsRoutes(mux *http.ServeMux) { 31 | var isDevelopment = os.Getenv("GO_ENV") != "production" 32 | 33 | assetHandler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { 34 | if isDevelopment { 35 | w.Header().Set("Cache-Control", "no-store") 36 | } 37 | 38 | var fs http.Handler 39 | if isDevelopment { 40 | fs = http.FileServer(http.Dir("./assets")) 41 | } else { 42 | fs = http.FileServer(http.FS(assets.Assets)) 43 | } 44 | 45 | fs.ServeHTTP(w, r) 46 | }) 47 | 48 | mux.Handle("GET /assets/", http.StripPrefix("/assets/", assetHandler)) 49 | } 50 | -------------------------------------------------------------------------------- /ui/components/button/button.templ: -------------------------------------------------------------------------------- 1 | // templui component button - version: main installed by templui v0.74.1 2 | package button 3 | 4 | import ( 5 | "github.com/axzilla/templui-quickstart/utils" 6 | "strings" 7 | ) 8 | 9 | type Variant string 10 | type Size string 11 | type Type string 12 | 13 | const ( 14 | VariantDefault Variant = "default" 15 | VariantDestructive Variant = "destructive" 16 | VariantOutline Variant = "outline" 17 | VariantSecondary Variant = "secondary" 18 | VariantGhost Variant = "ghost" 19 | VariantLink Variant = "link" 20 | ) 21 | 22 | const ( 23 | TypeButton Type = "button" 24 | TypeReset Type = "reset" 25 | TypeSubmit Type = "submit" 26 | ) 27 | 28 | const ( 29 | SizeIcon Size = "icon" 30 | ) 31 | 32 | type Props struct { 33 | ID string 34 | Class string 35 | Attributes templ.Attributes 36 | Variant Variant 37 | Size Size 38 | FullWidth bool 39 | Href string 40 | Target string 41 | Disabled bool 42 | Type Type 43 | HxGet string 44 | HxPost string 45 | HxPut string 46 | HxDelete string 47 | HxTrigger string 48 | HxTarget string 49 | HxSwap string 50 | HxReplaceUrl string 51 | } 52 | 53 | templ Button(props ...Props) { 54 | {{ var p Props }} 55 | if len(props) > 0 { 56 | {{ p = props[0] }} 57 | } 58 | if p.Type == "" { 59 | {{ p.Type = TypeButton }} 60 | } 61 | if p.Href != "" && !p.Disabled { 62 | 83 | { children... } 84 | 85 | } else { 86 | 134 | } 135 | } 136 | 137 | func (b Props) variantClasses() string { 138 | switch b.Variant { 139 | case VariantDestructive: 140 | return "bg-destructive text-destructive-foreground hover:bg-destructive/90" 141 | case VariantOutline: 142 | return "border border-input bg-background hover:bg-accent hover:text-accent-foreground" 143 | case VariantSecondary: 144 | return "bg-secondary text-secondary-foreground hover:bg-secondary/80" 145 | case VariantGhost: 146 | return "hover:bg-accent hover:text-accent-foreground" 147 | case VariantLink: 148 | return "text-primary underline-offset-4 hover:underline" 149 | default: 150 | return "bg-primary text-primary-foreground hover:bg-primary/90" 151 | } 152 | } 153 | 154 | func (b Props) sizeClasses() string { 155 | switch b.Size { 156 | case SizeIcon: 157 | return "h-10 w-10" 158 | default: 159 | return "h-10 px-4 py-2 rounded-md" 160 | } 161 | } 162 | 163 | func (b Props) modifierClasses() string { 164 | classes := []string{} 165 | if b.FullWidth { 166 | classes = append(classes, "w-full") 167 | } 168 | return strings.Join(classes, " ") 169 | } 170 | -------------------------------------------------------------------------------- /ui/components/icon/icon.go: -------------------------------------------------------------------------------- 1 | // templui component icon - version: main installed by templui v0.74.1 2 | package icon 3 | 4 | import ( 5 | "context" 6 | "fmt" 7 | "io" 8 | "sync" 9 | 10 | "github.com/a-h/templ" 11 | ) 12 | 13 | // iconContents caches the fully generated SVG strings for icons that have been used, 14 | // keyed by a composite key of name and props to handle different stylings. 15 | var ( 16 | iconContents = make(map[string]string) 17 | iconMutex sync.RWMutex 18 | ) 19 | 20 | // Props defines the properties that can be set for an icon. 21 | type Props struct { 22 | Size int 23 | Color string 24 | Fill string 25 | Stroke string 26 | StrokeWidth string // Stroke Width of Icon, Usage: "2.5" 27 | Class string 28 | } 29 | 30 | // Icon returns a function that generates a templ.Component for the specified icon name. 31 | func Icon(name string) func(...Props) templ.Component { 32 | return func(props ...Props) templ.Component { 33 | var p Props 34 | if len(props) > 0 { 35 | p = props[0] 36 | } 37 | 38 | // Create a unique key for the cache based on icon name and all relevant props. 39 | // This ensures different stylings of the same icon are cached separately. 40 | cacheKey := fmt.Sprintf("%s|s:%d|c:%s|f:%s|sk:%s|sw:%s|cl:%s", 41 | name, p.Size, p.Color, p.Fill, p.Stroke, p.StrokeWidth, p.Class) 42 | 43 | return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) { 44 | iconMutex.RLock() 45 | svg, cached := iconContents[cacheKey] 46 | iconMutex.RUnlock() 47 | 48 | if cached { 49 | _, err = w.Write([]byte(svg)) 50 | return err 51 | } 52 | 53 | // Not cached, generate it 54 | // The actual generation now happens once and is cached. 55 | generatedSvg, err := generateSVG(name, p) // p (Props) is passed to generateSVG 56 | if err != nil { 57 | // Provide more context in the error message 58 | return fmt.Errorf("failed to generate svg for icon '%s' with props %+v: %w", name, p, err) 59 | } 60 | 61 | iconMutex.Lock() 62 | iconContents[cacheKey] = generatedSvg 63 | iconMutex.Unlock() 64 | 65 | _, err = w.Write([]byte(generatedSvg)) 66 | return err 67 | }) 68 | } 69 | } 70 | 71 | // generateSVG creates an SVG string for the specified icon with the given properties. 72 | // This function is called when an icon-prop combination is not yet in the cache. 73 | func generateSVG(name string, props Props) (string, error) { 74 | // Get the raw, inner SVG content for the icon name from our internal data map. 75 | content, err := getIconContent(name) // This now reads from internalSvgData 76 | if err != nil { 77 | return "", err // Error from getIconContent already includes icon name 78 | } 79 | 80 | size := props.Size 81 | if size <= 0 { 82 | size = 24 // Default size 83 | } 84 | 85 | fill := props.Fill 86 | if fill == "" { 87 | fill = "none" // Default fill 88 | } 89 | 90 | stroke := props.Stroke 91 | if stroke == "" { 92 | stroke = props.Color // Fallback to Color if Stroke is not set 93 | } 94 | if stroke == "" { 95 | stroke = "currentColor" // Default stroke color 96 | } 97 | 98 | strokeWidth := props.StrokeWidth 99 | if strokeWidth == "" { 100 | strokeWidth = "2" // Default stroke width 101 | } 102 | 103 | // Construct the final SVG string. 104 | // The data-lucide attribute helps identify these as Lucide icons if needed. 105 | return fmt.Sprintf("%s", 106 | size, size, fill, stroke, strokeWidth, props.Class, content), nil 107 | } 108 | 109 | // getIconContent retrieves the raw inner SVG content for a given icon name. 110 | // It reads from the pre-generated internalSvgData map from icon_data.go. 111 | func getIconContent(name string) (string, error) { 112 | content, exists := internalSvgData[name] 113 | if !exists { 114 | return "", fmt.Errorf("icon '%s' not found in internalSvgData map", name) 115 | } 116 | return content, nil 117 | } 118 | -------------------------------------------------------------------------------- /ui/components/icon/icondefs.go: -------------------------------------------------------------------------------- 1 | // templui component icon - version: main installed by templui v0.74.1 2 | package icon 3 | // This file is auto generated 4 | // Using Lucide icons version 0.507.0 5 | var ALargeSmall = Icon("a-large-small") 6 | var Accessibility = Icon("accessibility") 7 | var Antenna = Icon("antenna") 8 | var Activity = Icon("activity") 9 | var AirVent = Icon("air-vent") 10 | var AlarmClockCheck = Icon("alarm-clock-check") 11 | var AlarmClockMinus = Icon("alarm-clock-minus") 12 | var AlarmClockOff = Icon("alarm-clock-off") 13 | var Airplay = Icon("airplay") 14 | var AtSign = Icon("at-sign") 15 | var AlarmClockPlus = Icon("alarm-clock-plus") 16 | var AlarmClock = Icon("alarm-clock") 17 | var AlarmSmoke = Icon("alarm-smoke") 18 | var Album = Icon("album") 19 | var AlignCenterHorizontal = Icon("align-center-horizontal") 20 | var AlignCenterVertical = Icon("align-center-vertical") 21 | var AlignCenter = Icon("align-center") 22 | var AlignEndHorizontal = Icon("align-end-horizontal") 23 | var AlignEndVertical = Icon("align-end-vertical") 24 | var AlignHorizontalDistributeCenter = Icon("align-horizontal-distribute-center") 25 | var AlignHorizontalDistributeEnd = Icon("align-horizontal-distribute-end") 26 | var AlignHorizontalDistributeStart = Icon("align-horizontal-distribute-start") 27 | var AlignHorizontalJustifyCenter = Icon("align-horizontal-justify-center") 28 | var AlignHorizontalJustifyEnd = Icon("align-horizontal-justify-end") 29 | var AlignHorizontalJustifyStart = Icon("align-horizontal-justify-start") 30 | var AlignHorizontalSpaceAround = Icon("align-horizontal-space-around") 31 | var AlignHorizontalSpaceBetween = Icon("align-horizontal-space-between") 32 | var AlignJustify = Icon("align-justify") 33 | var AlignLeft = Icon("align-left") 34 | var AlignRight = Icon("align-right") 35 | var AlignStartVertical = Icon("align-start-vertical") 36 | var AlignStartHorizontal = Icon("align-start-horizontal") 37 | var AlignVerticalDistributeCenter = Icon("align-vertical-distribute-center") 38 | var AlignVerticalDistributeEnd = Icon("align-vertical-distribute-end") 39 | var AlignVerticalDistributeStart = Icon("align-vertical-distribute-start") 40 | var AlignVerticalJustifyCenter = Icon("align-vertical-justify-center") 41 | var AlignVerticalJustifyEnd = Icon("align-vertical-justify-end") 42 | var AlignVerticalJustifyStart = Icon("align-vertical-justify-start") 43 | var AlignVerticalSpaceAround = Icon("align-vertical-space-around") 44 | var AlignVerticalSpaceBetween = Icon("align-vertical-space-between") 45 | var Ambulance = Icon("ambulance") 46 | var Ampersand = Icon("ampersand") 47 | var Ampersands = Icon("ampersands") 48 | var Amphora = Icon("amphora") 49 | var Anchor = Icon("anchor") 50 | var Angry = Icon("angry") 51 | var Annoyed = Icon("annoyed") 52 | var Anvil = Icon("anvil") 53 | var Aperture = Icon("aperture") 54 | var AppWindowMac = Icon("app-window-mac") 55 | var AppWindow = Icon("app-window") 56 | var Apple = Icon("apple") 57 | var ArchiveRestore = Icon("archive-restore") 58 | var ArchiveX = Icon("archive-x") 59 | var Archive = Icon("archive") 60 | var Armchair = Icon("armchair") 61 | var ArrowBigDownDash = Icon("arrow-big-down-dash") 62 | var ArrowBigDown = Icon("arrow-big-down") 63 | var ArrowBigLeftDash = Icon("arrow-big-left-dash") 64 | var ArrowBigLeft = Icon("arrow-big-left") 65 | var ArrowBigRightDash = Icon("arrow-big-right-dash") 66 | var ArrowBigRight = Icon("arrow-big-right") 67 | var ArrowBigUpDash = Icon("arrow-big-up-dash") 68 | var ArrowBigUp = Icon("arrow-big-up") 69 | var ArrowDown01 = Icon("arrow-down-0-1") 70 | var ArrowDown10 = Icon("arrow-down-1-0") 71 | var ArrowDownAZ = Icon("arrow-down-a-z") 72 | var ArrowDownFromLine = Icon("arrow-down-from-line") 73 | var ArrowDownLeft = Icon("arrow-down-left") 74 | var ArrowDownNarrowWide = Icon("arrow-down-narrow-wide") 75 | var ArrowDownRight = Icon("arrow-down-right") 76 | var ArrowDownToDot = Icon("arrow-down-to-dot") 77 | var ArrowDownToLine = Icon("arrow-down-to-line") 78 | var ArrowDownUp = Icon("arrow-down-up") 79 | var ArrowDownWideNarrow = Icon("arrow-down-wide-narrow") 80 | var ArrowDownZA = Icon("arrow-down-z-a") 81 | var ArrowDown = Icon("arrow-down") 82 | var ArrowLeftFromLine = Icon("arrow-left-from-line") 83 | var ArrowLeftRight = Icon("arrow-left-right") 84 | var ArrowLeftToLine = Icon("arrow-left-to-line") 85 | var ArrowLeft = Icon("arrow-left") 86 | var ArrowRightFromLine = Icon("arrow-right-from-line") 87 | var ArrowRightLeft = Icon("arrow-right-left") 88 | var ArrowRightToLine = Icon("arrow-right-to-line") 89 | var ArrowRight = Icon("arrow-right") 90 | var ArrowUp01 = Icon("arrow-up-0-1") 91 | var ArrowUp10 = Icon("arrow-up-1-0") 92 | var ArrowUpAZ = Icon("arrow-up-a-z") 93 | var ArrowUpDown = Icon("arrow-up-down") 94 | var ArrowUpFromDot = Icon("arrow-up-from-dot") 95 | var ArrowUpFromLine = Icon("arrow-up-from-line") 96 | var ArrowUpLeft = Icon("arrow-up-left") 97 | var ArrowUpNarrowWide = Icon("arrow-up-narrow-wide") 98 | var ArrowUpRight = Icon("arrow-up-right") 99 | var ArrowUpToLine = Icon("arrow-up-to-line") 100 | var ArrowUpWideNarrow = Icon("arrow-up-wide-narrow") 101 | var ArrowUpZA = Icon("arrow-up-z-a") 102 | var ArrowUp = Icon("arrow-up") 103 | var ArrowsUpFromLine = Icon("arrows-up-from-line") 104 | var Asterisk = Icon("asterisk") 105 | var BellDot = Icon("bell-dot") 106 | var Atom = Icon("atom") 107 | var AudioLines = Icon("audio-lines") 108 | var AudioWaveform = Icon("audio-waveform") 109 | var Award = Icon("award") 110 | var Axe = Icon("axe") 111 | var Axis3d = Icon("axis-3d") 112 | var Baby = Icon("baby") 113 | var Backpack = Icon("backpack") 114 | var BadgeAlert = Icon("badge-alert") 115 | var BadgeCent = Icon("badge-cent") 116 | var BadgeCheck = Icon("badge-check") 117 | var BadgeDollarSign = Icon("badge-dollar-sign") 118 | var BadgeEuro = Icon("badge-euro") 119 | var BadgeHelp = Icon("badge-help") 120 | var BadgeIndianRupee = Icon("badge-indian-rupee") 121 | var BadgeInfo = Icon("badge-info") 122 | var BadgeJapaneseYen = Icon("badge-japanese-yen") 123 | var BadgeMinus = Icon("badge-minus") 124 | var BadgePercent = Icon("badge-percent") 125 | var BadgePlus = Icon("badge-plus") 126 | var BadgePoundSterling = Icon("badge-pound-sterling") 127 | var BadgeRussianRuble = Icon("badge-russian-ruble") 128 | var BadgeSwissFranc = Icon("badge-swiss-franc") 129 | var BadgeX = Icon("badge-x") 130 | var BookmarkMinus = Icon("bookmark-minus") 131 | var AArrowDown = Icon("a-arrow-down") 132 | var Bone = Icon("bone") 133 | var Badge = Icon("badge") 134 | var BookA = Icon("book-a") 135 | var BookAudio = Icon("book-audio") 136 | var BookCheck = Icon("book-check") 137 | var BookCopy = Icon("book-copy") 138 | var BookDashed = Icon("book-dashed") 139 | var BookDown = Icon("book-down") 140 | var BookHeadphones = Icon("book-headphones") 141 | var BookHeart = Icon("book-heart") 142 | var BookImage = Icon("book-image") 143 | var BookKey = Icon("book-key") 144 | var BookLock = Icon("book-lock") 145 | var BookMarked = Icon("book-marked") 146 | var BookMinus = Icon("book-minus") 147 | var BookOpenCheck = Icon("book-open-check") 148 | var BookOpenText = Icon("book-open-text") 149 | var BookOpen = Icon("book-open") 150 | var AArrowUp = Icon("a-arrow-up") 151 | var Bomb = Icon("bomb") 152 | var BellElectric = Icon("bell-electric") 153 | var BellMinus = Icon("bell-minus") 154 | var BellOff = Icon("bell-off") 155 | var BugPlay = Icon("bug-play") 156 | var BrainCog = Icon("brain-cog") 157 | var Brain = Icon("brain") 158 | var BrickWallFire = Icon("brick-wall-fire") 159 | var BrickWall = Icon("brick-wall") 160 | var BriefcaseBusiness = Icon("briefcase-business") 161 | var BaggageClaim = Icon("baggage-claim") 162 | var Ban = Icon("ban") 163 | var Banana = Icon("banana") 164 | var Bandage = Icon("bandage") 165 | var BanknoteArrowDown = Icon("banknote-arrow-down") 166 | var BanknoteArrowUp = Icon("banknote-arrow-up") 167 | var BanknoteX = Icon("banknote-x") 168 | var Banknote = Icon("banknote") 169 | var Barcode = Icon("barcode") 170 | var Baseline = Icon("baseline") 171 | var BookUp = Icon("book-up") 172 | var BriefcaseConveyorBelt = Icon("briefcase-conveyor-belt") 173 | var BookUser = Icon("book-user") 174 | var BookPlus = Icon("book-plus") 175 | var BookX = Icon("book-x") 176 | var Book = Icon("book") 177 | var BookmarkCheck = Icon("bookmark-check") 178 | var BriefcaseMedical = Icon("briefcase-medical") 179 | var BellPlus = Icon("bell-plus") 180 | var CalendarSearch = Icon("calendar-search") 181 | var Bug = Icon("bug") 182 | var Building2 = Icon("building-2") 183 | var Building = Icon("building") 184 | var BusFront = Icon("bus-front") 185 | var Bus = Icon("bus") 186 | var CableCar = Icon("cable-car") 187 | var Cable = Icon("cable") 188 | var CakeSlice = Icon("cake-slice") 189 | var Cake = Icon("cake") 190 | var Calculator = Icon("calculator") 191 | var Calendar1 = Icon("calendar-1") 192 | var CalendarArrowDown = Icon("calendar-arrow-down") 193 | var CalendarArrowUp = Icon("calendar-arrow-up") 194 | var CalendarCheck2 = Icon("calendar-check-2") 195 | var CalendarCheck = Icon("calendar-check") 196 | var Bath = Icon("bath") 197 | var BookText = Icon("book-text") 198 | var BookType = Icon("book-type") 199 | var BookUp2 = Icon("book-up-2") 200 | var BatteryCharging = Icon("battery-charging") 201 | var BatteryFull = Icon("battery-full") 202 | var BatteryLow = Icon("battery-low") 203 | var BatteryMedium = Icon("battery-medium") 204 | var BrushCleaning = Icon("brush-cleaning") 205 | var BatteryPlus = Icon("battery-plus") 206 | var Briefcase = Icon("briefcase") 207 | var BringToFront = Icon("bring-to-front") 208 | var Box = Icon("box") 209 | var Brush = Icon("brush") 210 | var Bubbles = Icon("bubbles") 211 | var BugOff = Icon("bug-off") 212 | var Bird = Icon("bird") 213 | var Bell = Icon("bell") 214 | var BetweenHorizontalEnd = Icon("between-horizontal-end") 215 | var BetweenHorizontalStart = Icon("between-horizontal-start") 216 | var BetweenVerticalEnd = Icon("between-vertical-end") 217 | var BetweenVerticalStart = Icon("between-vertical-start") 218 | var BotOff = Icon("bot-off") 219 | var BookmarkPlus = Icon("bookmark-plus") 220 | var BookmarkX = Icon("bookmark-x") 221 | var Bookmark = Icon("bookmark") 222 | var BoomBox = Icon("boom-box") 223 | var BotMessageSquare = Icon("bot-message-square") 224 | var BluetoothConnected = Icon("bluetooth-connected") 225 | var Bitcoin = Icon("bitcoin") 226 | var Blend = Icon("blend") 227 | var Blinds = Icon("blinds") 228 | var Blocks = Icon("blocks") 229 | var Bluetooth = Icon("bluetooth") 230 | var BluetoothOff = Icon("bluetooth-off") 231 | var BluetoothSearching = Icon("bluetooth-searching") 232 | var BowArrow = Icon("bow-arrow") 233 | var Binary = Icon("binary") 234 | var Bike = Icon("bike") 235 | var Braces = Icon("braces") 236 | var Boxes = Icon("boxes") 237 | var BedDouble = Icon("bed-double") 238 | var Battery = Icon("battery") 239 | var Beaker = Icon("beaker") 240 | var BeanOff = Icon("bean-off") 241 | var Bean = Icon("bean") 242 | var Beef = Icon("beef") 243 | var BedSingle = Icon("bed-single") 244 | var Bed = Icon("bed") 245 | var BicepsFlexed = Icon("biceps-flexed") 246 | var CalendarMinus2 = Icon("calendar-minus-2") 247 | var CalendarCog = Icon("calendar-cog") 248 | var CalendarDays = Icon("calendar-days") 249 | var CalendarFold = Icon("calendar-fold") 250 | var CalendarHeart = Icon("calendar-heart") 251 | var BeerOff = Icon("beer-off") 252 | var Bold = Icon("bold") 253 | var Binoculars = Icon("binoculars") 254 | var Brackets = Icon("brackets") 255 | var Beer = Icon("beer") 256 | var CalendarPlus2 = Icon("calendar-plus-2") 257 | var CalendarMinus = Icon("calendar-minus") 258 | var CalendarOff = Icon("calendar-off") 259 | var CalendarPlus = Icon("calendar-plus") 260 | var Biohazard = Icon("biohazard") 261 | var Bolt = Icon("bolt") 262 | var CalendarRange = Icon("calendar-range") 263 | var CalendarClock = Icon("calendar-clock") 264 | var BrainCircuit = Icon("brain-circuit") 265 | var Bot = Icon("bot") 266 | var BellRing = Icon("bell-ring") 267 | var BatteryWarning = Icon("battery-warning") 268 | var CalendarSync = Icon("calendar-sync") 269 | var CalendarX2 = Icon("calendar-x-2") 270 | var Cannabis = Icon("cannabis") 271 | var CalendarX = Icon("calendar-x") 272 | var Carrot = Icon("carrot") 273 | var CaptionsOff = Icon("captions-off") 274 | var Captions = Icon("captions") 275 | var CarFront = Icon("car-front") 276 | var CarTaxiFront = Icon("car-taxi-front") 277 | var Car = Icon("car") 278 | var Caravan = Icon("caravan") 279 | var Cat = Icon("cat") 280 | var CaseLower = Icon("case-lower") 281 | var CaseSensitive = Icon("case-sensitive") 282 | var CaseUpper = Icon("case-upper") 283 | var CassetteTape = Icon("cassette-tape") 284 | var Cast = Icon("cast") 285 | var Castle = Icon("castle") 286 | var ChartBar = Icon("chart-bar") 287 | var Cctv = Icon("cctv") 288 | var ChartArea = Icon("chart-area") 289 | var ChartBarBig = Icon("chart-bar-big") 290 | var ChartBarDecreasing = Icon("chart-bar-decreasing") 291 | var ChartBarIncreasing = Icon("chart-bar-increasing") 292 | var ChartBarStacked = Icon("chart-bar-stacked") 293 | var ChartColumnIncreasing = Icon("chart-column-increasing") 294 | var ChartColumnDecreasing = Icon("chart-column-decreasing") 295 | var ChartNoAxesColumnDecreasing = Icon("chart-no-axes-column-decreasing") 296 | var ChartColumnStacked = Icon("chart-column-stacked") 297 | var ChartColumn = Icon("chart-column") 298 | var ChartGantt = Icon("chart-gantt") 299 | var ChartLine = Icon("chart-line") 300 | var ChartNetwork = Icon("chart-network") 301 | var ChartScatter = Icon("chart-scatter") 302 | var ChartNoAxesColumnIncreasing = Icon("chart-no-axes-column-increasing") 303 | var ChartNoAxesColumn = Icon("chart-no-axes-column") 304 | var ChartNoAxesCombined = Icon("chart-no-axes-combined") 305 | var ChartNoAxesGantt = Icon("chart-no-axes-gantt") 306 | var ChartPie = Icon("chart-pie") 307 | var CandyCane = Icon("candy-cane") 308 | var Camera = Icon("camera") 309 | var ChartColumnBig = Icon("chart-column-big") 310 | var ChartCandlestick = Icon("chart-candlestick") 311 | var CandyOff = Icon("candy-off") 312 | var ChevronDown = Icon("chevron-down") 313 | var Cherry = Icon("cherry") 314 | var CameraOff = Icon("camera-off") 315 | var CheckCheck = Icon("check-check") 316 | var ChartSpline = Icon("chart-spline") 317 | var Check = Icon("check") 318 | var ChevronLast = Icon("chevron-last") 319 | var Candy = Icon("candy") 320 | var Calendar = Icon("calendar") 321 | var ChevronUp = Icon("chevron-up") 322 | var ChevronLeft = Icon("chevron-left") 323 | var ChevronRight = Icon("chevron-right") 324 | var ChevronsDown = Icon("chevrons-down") 325 | var ChevronsDownUp = Icon("chevrons-down-up") 326 | var CircleArrowOutDownLeft = Icon("circle-arrow-out-down-left") 327 | var ChevronsLeft = Icon("chevrons-left") 328 | var ChevronsRightLeft = Icon("chevrons-right-left") 329 | var ChevronsRight = Icon("chevrons-right") 330 | var ChevronsUpDown = Icon("chevrons-up-down") 331 | var ChevronsUp = Icon("chevrons-up") 332 | var Chrome = Icon("chrome") 333 | var Church = Icon("church") 334 | var CigaretteOff = Icon("cigarette-off") 335 | var Cigarette = Icon("cigarette") 336 | var CircleAlert = Icon("circle-alert") 337 | var CircleArrowDown = Icon("circle-arrow-down") 338 | var CircleArrowLeft = Icon("circle-arrow-left") 339 | var ChevronsLeftRightEllipsis = Icon("chevrons-left-right-ellipsis") 340 | var CircleSlash = Icon("circle-slash") 341 | var CircleArrowOutDownRight = Icon("circle-arrow-out-down-right") 342 | var CircleArrowOutUpLeft = Icon("circle-arrow-out-up-left") 343 | var CircleArrowOutUpRight = Icon("circle-arrow-out-up-right") 344 | var CircleArrowRight = Icon("circle-arrow-right") 345 | var CircleArrowUp = Icon("circle-arrow-up") 346 | var CircleCheckBig = Icon("circle-check-big") 347 | var CircleCheck = Icon("circle-check") 348 | var CircleChevronDown = Icon("circle-chevron-down") 349 | var CircleChevronLeft = Icon("circle-chevron-left") 350 | var CircleChevronRight = Icon("circle-chevron-right") 351 | var CircleChevronUp = Icon("circle-chevron-up") 352 | var CircleDashed = Icon("circle-dashed") 353 | var CircleDivide = Icon("circle-divide") 354 | var CircleDollarSign = Icon("circle-dollar-sign") 355 | var CircleDotDashed = Icon("circle-dot-dashed") 356 | var CircleDot = Icon("circle-dot") 357 | var CircleEqual = Icon("circle-equal") 358 | var CircleEllipsis = Icon("circle-ellipsis") 359 | var CircleFadingArrowUp = Icon("circle-fading-arrow-up") 360 | var CircleFadingPlus = Icon("circle-fading-plus") 361 | var CircleGauge = Icon("circle-gauge") 362 | var CircleHelp = Icon("circle-help") 363 | var CircleMinus = Icon("circle-minus") 364 | var CircleOff = Icon("circle-off") 365 | var ChevronsLeftRight = Icon("chevrons-left-right") 366 | var CirclePlay = Icon("circle-play") 367 | var CircleParking = Icon("circle-parking") 368 | var CirclePause = Icon("circle-pause") 369 | var CirclePercent = Icon("circle-percent") 370 | var Clock7 = Icon("clock-7") 371 | var CircleSmall = Icon("circle-small") 372 | var CircleStop = Icon("circle-stop") 373 | var CircleUserRound = Icon("circle-user-round") 374 | var CircleUser = Icon("circle-user") 375 | var CircleX = Icon("circle-x") 376 | var Circle = Icon("circle") 377 | var CircuitBoard = Icon("circuit-board") 378 | var Citrus = Icon("citrus") 379 | var Clapperboard = Icon("clapperboard") 380 | var ClipboardCheck = Icon("clipboard-check") 381 | var ClipboardCopy = Icon("clipboard-copy") 382 | var ClipboardList = Icon("clipboard-list") 383 | var ClipboardMinus = Icon("clipboard-minus") 384 | var CircleSlash2 = Icon("circle-slash-2") 385 | var Clock10 = Icon("clock-10") 386 | var Clock11 = Icon("clock-11") 387 | var Clock12 = Icon("clock-12") 388 | var Clock2 = Icon("clock-2") 389 | var Clock3 = Icon("clock-3") 390 | var Clock4 = Icon("clock-4") 391 | var Clock5 = Icon("clock-5") 392 | var Clock6 = Icon("clock-6") 393 | var ClockPlus = Icon("clock-plus") 394 | var Clock8 = Icon("clock-8") 395 | var Clock9 = Icon("clock-9") 396 | var ClockAlert = Icon("clock-alert") 397 | var ClockArrowDown = Icon("clock-arrow-down") 398 | var ClockArrowUp = Icon("clock-arrow-up") 399 | var ClockFading = Icon("clock-fading") 400 | var CloudDownload = Icon("cloud-download") 401 | var Clock = Icon("clock") 402 | var CloudAlert = Icon("cloud-alert") 403 | var CloudCog = Icon("cloud-cog") 404 | var Cloudy = Icon("cloudy") 405 | var CircleParkingOff = Icon("circle-parking-off") 406 | var CloudFog = Icon("cloud-fog") 407 | var CloudDrizzle = Icon("cloud-drizzle") 408 | var CirclePlus = Icon("circle-plus") 409 | var Coffee = Icon("coffee") 410 | var Clover = Icon("clover") 411 | var Club = Icon("club") 412 | var CodeXml = Icon("code-xml") 413 | var Code = Icon("code") 414 | var Codepen = Icon("codepen") 415 | var Codesandbox = Icon("codesandbox") 416 | var ClipboardPlus = Icon("clipboard-plus") 417 | var CloudMoonRain = Icon("cloud-moon-rain") 418 | var CloudMoon = Icon("cloud-moon") 419 | var CloudOff = Icon("cloud-off") 420 | var CloudRainWind = Icon("cloud-rain-wind") 421 | var CloudRain = Icon("cloud-rain") 422 | var CloudSnow = Icon("cloud-snow") 423 | var CloudSunRain = Icon("cloud-sun-rain") 424 | var CloudSun = Icon("cloud-sun") 425 | var CloudUpload = Icon("cloud-upload") 426 | var Cloud = Icon("cloud") 427 | var ClipboardPenLine = Icon("clipboard-pen-line") 428 | var ClipboardPen = Icon("clipboard-pen") 429 | var CloudHail = Icon("cloud-hail") 430 | var Cookie = Icon("cookie") 431 | var ClipboardPaste = Icon("clipboard-paste") 432 | var ClipboardX = Icon("clipboard-x") 433 | var ClipboardType = Icon("clipboard-type") 434 | var Component = Icon("component") 435 | var Coins = Icon("coins") 436 | var Columns2 = Icon("columns-2") 437 | var Columns3Cog = Icon("columns-3-cog") 438 | var Columns3 = Icon("columns-3") 439 | var Columns4 = Icon("columns-4") 440 | var Combine = Icon("combine") 441 | var Command = Icon("command") 442 | var Compass = Icon("compass") 443 | var Clipboard = Icon("clipboard") 444 | var CupSoda = Icon("cup-soda") 445 | var CookingPot = Icon("cooking-pot") 446 | var CopyCheck = Icon("copy-check") 447 | var CopyMinus = Icon("copy-minus") 448 | var CopyPlus = Icon("copy-plus") 449 | var CopySlash = Icon("copy-slash") 450 | var CopyX = Icon("copy-x") 451 | var Copy = Icon("copy") 452 | var Copyleft = Icon("copyleft") 453 | var Copyright = Icon("copyright") 454 | var CornerDownLeft = Icon("corner-down-left") 455 | var CornerDownRight = Icon("corner-down-right") 456 | var CornerLeftDown = Icon("corner-left-down") 457 | var CornerLeftUp = Icon("corner-left-up") 458 | var CornerRightDown = Icon("corner-right-down") 459 | var CornerRightUp = Icon("corner-right-up") 460 | var CornerUpLeft = Icon("corner-up-left") 461 | var CornerUpRight = Icon("corner-up-right") 462 | var Cpu = Icon("cpu") 463 | var CreativeCommons = Icon("creative-commons") 464 | var CreditCard = Icon("credit-card") 465 | var Croissant = Icon("croissant") 466 | var Crop = Icon("crop") 467 | var Cross = Icon("cross") 468 | var Cog = Icon("cog") 469 | var Computer = Icon("computer") 470 | var ConciergeBell = Icon("concierge-bell") 471 | var Cone = Icon("cone") 472 | var Construction = Icon("construction") 473 | var ContactRound = Icon("contact-round") 474 | var Contact = Icon("contact") 475 | var Container = Icon("container") 476 | var Contrast = Icon("contrast") 477 | var Crown = Icon("crown") 478 | var Cuboid = Icon("cuboid") 479 | var Egg = Icon("egg") 480 | var Currency = Icon("currency") 481 | var Cylinder = Icon("cylinder") 482 | var Dam = Icon("dam") 483 | var DatabaseBackup = Icon("database-backup") 484 | var DatabaseZap = Icon("database-zap") 485 | var Database = Icon("database") 486 | var DecimalsArrowLeft = Icon("decimals-arrow-left") 487 | var DecimalsArrowRight = Icon("decimals-arrow-right") 488 | var Delete = Icon("delete") 489 | var Dessert = Icon("dessert") 490 | var Diameter = Icon("diameter") 491 | var DiamondMinus = Icon("diamond-minus") 492 | var DiamondPercent = Icon("diamond-percent") 493 | var DiamondPlus = Icon("diamond-plus") 494 | var Diamond = Icon("diamond") 495 | var Dice1 = Icon("dice-1") 496 | var Dice2 = Icon("dice-2") 497 | var Dice3 = Icon("dice-3") 498 | var Dice4 = Icon("dice-4") 499 | var Dice5 = Icon("dice-5") 500 | var Dice6 = Icon("dice-6") 501 | var Dices = Icon("dices") 502 | var Diff = Icon("diff") 503 | var Disc2 = Icon("disc-2") 504 | var Disc3 = Icon("disc-3") 505 | var DiscAlbum = Icon("disc-album") 506 | var Disc = Icon("disc") 507 | var Divide = Icon("divide") 508 | var DnaOff = Icon("dna-off") 509 | var ChefHat = Icon("chef-hat") 510 | var Drill = Icon("drill") 511 | var Dock = Icon("dock") 512 | var Dog = Icon("dog") 513 | var DollarSign = Icon("dollar-sign") 514 | var Donut = Icon("donut") 515 | var DoorClosedLocked = Icon("door-closed-locked") 516 | var DoorClosed = Icon("door-closed") 517 | var Dna = Icon("dna") 518 | var DoorOpen = Icon("door-open") 519 | var Dot = Icon("dot") 520 | var Download = Icon("download") 521 | var DraftingCompass = Icon("drafting-compass") 522 | var Drama = Icon("drama") 523 | var Dribbble = Icon("dribbble") 524 | var DropletOff = Icon("droplet-off") 525 | var EarOff = Icon("ear-off") 526 | var Ear = Icon("ear") 527 | var EarthLock = Icon("earth-lock") 528 | var Earth = Icon("earth") 529 | var Eclipse = Icon("eclipse") 530 | var EggFried = Icon("egg-fried") 531 | var EggOff = Icon("egg-off") 532 | var Drum = Icon("drum") 533 | var Droplets = Icon("droplets") 534 | var Drumstick = Icon("drumstick") 535 | var Crosshair = Icon("crosshair") 536 | var FileOutput = Icon("file-output") 537 | var FileBox = Icon("file-box") 538 | var FileBadge = Icon("file-badge") 539 | var FileChartColumnIncreasing = Icon("file-chart-column-increasing") 540 | var FileChartColumn = Icon("file-chart-column") 541 | var FileChartLine = Icon("file-chart-line") 542 | var FileChartPie = Icon("file-chart-pie") 543 | var FileCheck2 = Icon("file-check-2") 544 | var FileCheck = Icon("file-check") 545 | var FileClock = Icon("file-clock") 546 | var FileCode2 = Icon("file-code-2") 547 | var FileCode = Icon("file-code") 548 | var FileCog = Icon("file-cog") 549 | var FileDiff = Icon("file-diff") 550 | var FileDigit = Icon("file-digit") 551 | var FileDown = Icon("file-down") 552 | var FileHeart = Icon("file-heart") 553 | var FileImage = Icon("file-image") 554 | var FileInput = Icon("file-input") 555 | var FileJson2 = Icon("file-json-2") 556 | var FileJson = Icon("file-json") 557 | var FileKey2 = Icon("file-key-2") 558 | var FileKey = Icon("file-key") 559 | var FileLock2 = Icon("file-lock-2") 560 | var FileLock = Icon("file-lock") 561 | var FileMinus2 = Icon("file-minus-2") 562 | var FileMinus = Icon("file-minus") 563 | var FileMusic = Icon("file-music") 564 | var Facebook = Icon("facebook") 565 | var Ellipsis = Icon("ellipsis") 566 | var EqualApproximately = Icon("equal-approximately") 567 | var EqualNot = Icon("equal-not") 568 | var Equal = Icon("equal") 569 | var Eraser = Icon("eraser") 570 | var EthernetPort = Icon("ethernet-port") 571 | var Euro = Icon("euro") 572 | var Expand = Icon("expand") 573 | var ExternalLink = Icon("external-link") 574 | var EyeClosed = Icon("eye-closed") 575 | var EyeOff = Icon("eye-off") 576 | var Eye = Icon("eye") 577 | var FerrisWheel = Icon("ferris-wheel") 578 | var Factory = Icon("factory") 579 | var Fan = Icon("fan") 580 | var FastForward = Icon("fast-forward") 581 | var Feather = Icon("feather") 582 | var Fence = Icon("fence") 583 | var Dumbbell = Icon("dumbbell") 584 | var FolderDown = Icon("folder-down") 585 | var FilePenLine = Icon("file-pen-line") 586 | var FilePen = Icon("file-pen") 587 | var FilePlus2 = Icon("file-plus-2") 588 | var FilePlus = Icon("file-plus") 589 | var FileQuestion = Icon("file-question") 590 | var FileScan = Icon("file-scan") 591 | var FileSearch2 = Icon("file-search-2") 592 | var FileSearch = Icon("file-search") 593 | var FileSliders = Icon("file-sliders") 594 | var FileSpreadsheet = Icon("file-spreadsheet") 595 | var FileStack = Icon("file-stack") 596 | var FileSymlink = Icon("file-symlink") 597 | var FileTerminal = Icon("file-terminal") 598 | var Droplet = Icon("droplet") 599 | var Flag = Icon("flag") 600 | var FileType2 = Icon("file-type-2") 601 | var FileType = Icon("file-type") 602 | var FileUp = Icon("file-up") 603 | var FileUser = Icon("file-user") 604 | var FileVideo2 = Icon("file-video-2") 605 | var FileVideo = Icon("file-video") 606 | var FileVolume2 = Icon("file-volume-2") 607 | var FileVolume = Icon("file-volume") 608 | var FileText = Icon("file-text") 609 | var FlameKindling = Icon("flame-kindling") 610 | var Flame = Icon("flame") 611 | var FlashlightOff = Icon("flashlight-off") 612 | var FileWarning = Icon("file-warning") 613 | var Flashlight = Icon("flashlight") 614 | var FlaskConicalOff = Icon("flask-conical-off") 615 | var FlaskConical = Icon("flask-conical") 616 | var FlaskRound = Icon("flask-round") 617 | var FlipHorizontal2 = Icon("flip-horizontal-2") 618 | var FlipHorizontal = Icon("flip-horizontal") 619 | var FlipVertical2 = Icon("flip-vertical-2") 620 | var FlipVertical = Icon("flip-vertical") 621 | var Flower2 = Icon("flower-2") 622 | var Flower = Icon("flower") 623 | var Focus = Icon("focus") 624 | var FoldHorizontal = Icon("fold-horizontal") 625 | var FoldVertical = Icon("fold-vertical") 626 | var FolderArchive = Icon("folder-archive") 627 | var FolderCheck = Icon("folder-check") 628 | var FolderClock = Icon("folder-clock") 629 | var EllipsisVertical = Icon("ellipsis-vertical") 630 | var Figma = Icon("figma") 631 | var FileArchive = Icon("file-archive") 632 | var FileAudio2 = Icon("file-audio-2") 633 | var FileAudio = Icon("file-audio") 634 | var FileAxis3d = Icon("file-axis-3d") 635 | var FileBadge2 = Icon("file-badge-2") 636 | var FileX2 = Icon("file-x-2") 637 | var FishOff = Icon("fish-off") 638 | var FishSymbol = Icon("fish-symbol") 639 | var Fish = Icon("fish") 640 | var FlagOff = Icon("flag-off") 641 | var FlagTriangleLeft = Icon("flag-triangle-left") 642 | var FlagTriangleRight = Icon("flag-triangle-right") 643 | var Files = Icon("files") 644 | var FileX = Icon("file-x") 645 | var File = Icon("file") 646 | var Film = Icon("film") 647 | var Fingerprint = Icon("fingerprint") 648 | var FolderCog = Icon("folder-cog") 649 | var FolderCode = Icon("folder-code") 650 | var Grid3x3 = Icon("grid-3x3") 651 | var FolderGit2 = Icon("folder-git-2") 652 | var FolderGit = Icon("folder-git") 653 | var FolderHeart = Icon("folder-heart") 654 | var FolderInput = Icon("folder-input") 655 | var FolderKanban = Icon("folder-kanban") 656 | var FolderKey = Icon("folder-key") 657 | var FolderLock = Icon("folder-lock") 658 | var FireExtinguisher = Icon("fire-extinguisher") 659 | var FolderDot = Icon("folder-dot") 660 | var History = Icon("history") 661 | var GripHorizontal = Icon("grip-horizontal") 662 | var GripVertical = Icon("grip-vertical") 663 | var Grip = Icon("grip") 664 | var Group = Icon("group") 665 | var Guitar = Icon("guitar") 666 | var FolderMinus = Icon("folder-minus") 667 | var Ham = Icon("ham") 668 | var Hamburger = Icon("hamburger") 669 | var Hammer = Icon("hammer") 670 | var HandCoins = Icon("hand-coins") 671 | var HandHeart = Icon("hand-heart") 672 | var HandHelping = Icon("hand-helping") 673 | var HandMetal = Icon("hand-metal") 674 | var FolderOpenDot = Icon("folder-open-dot") 675 | var HandPlatter = Icon("hand-platter") 676 | var FolderOpen = Icon("folder-open") 677 | var Hand = Icon("hand") 678 | var Handshake = Icon("handshake") 679 | var HardDriveDownload = Icon("hard-drive-download") 680 | var HardDriveUpload = Icon("hard-drive-upload") 681 | var HardDrive = Icon("hard-drive") 682 | var HardHat = Icon("hard-hat") 683 | var Hash = Icon("hash") 684 | var Haze = Icon("haze") 685 | var HdmiPort = Icon("hdmi-port") 686 | var FolderOutput = Icon("folder-output") 687 | var Heading1 = Icon("heading-1") 688 | var FolderPen = Icon("folder-pen") 689 | var FolderPlus = Icon("folder-plus") 690 | var FolderRoot = Icon("folder-root") 691 | var FolderSearch2 = Icon("folder-search-2") 692 | var FolderSearch = Icon("folder-search") 693 | var Heading2 = Icon("heading-2") 694 | var Heading3 = Icon("heading-3") 695 | var Heading4 = Icon("heading-4") 696 | var Heading5 = Icon("heading-5") 697 | var Heading6 = Icon("heading-6") 698 | var Heading = Icon("heading") 699 | var HeadphoneOff = Icon("headphone-off") 700 | var Headphones = Icon("headphones") 701 | var Headset = Icon("headset") 702 | var HeartCrack = Icon("heart-crack") 703 | var HeartHandshake = Icon("heart-handshake") 704 | var HeartMinus = Icon("heart-minus") 705 | var HeartOff = Icon("heart-off") 706 | var HeartPlus = Icon("heart-plus") 707 | var HeartPulse = Icon("heart-pulse") 708 | var Heart = Icon("heart") 709 | var FolderClosed = Icon("folder-closed") 710 | var CirclePower = Icon("circle-power") 711 | var Hexagon = Icon("hexagon") 712 | var Keyboard = Icon("keyboard") 713 | var HopOff = Icon("hop-off") 714 | var Hop = Icon("hop") 715 | var Hospital = Icon("hospital") 716 | var Hotel = Icon("hotel") 717 | var FolderSymlink = Icon("folder-symlink") 718 | var FolderSync = Icon("folder-sync") 719 | var FolderTree = Icon("folder-tree") 720 | var FolderUp = Icon("folder-up") 721 | var FolderX = Icon("folder-x") 722 | var Folder = Icon("folder") 723 | var Folders = Icon("folders") 724 | var Footprints = Icon("footprints") 725 | var Forklift = Icon("forklift") 726 | var Forward = Icon("forward") 727 | var Frame = Icon("frame") 728 | var Framer = Icon("framer") 729 | var Frown = Icon("frown") 730 | var Fuel = Icon("fuel") 731 | var Fullscreen = Icon("fullscreen") 732 | var FunnelPlus = Icon("funnel-plus") 733 | var FunnelX = Icon("funnel-x") 734 | var Funnel = Icon("funnel") 735 | var GalleryHorizontalEnd = Icon("gallery-horizontal-end") 736 | var GalleryHorizontal = Icon("gallery-horizontal") 737 | var GalleryThumbnails = Icon("gallery-thumbnails") 738 | var GalleryVerticalEnd = Icon("gallery-vertical-end") 739 | var GalleryVertical = Icon("gallery-vertical") 740 | var Gamepad2 = Icon("gamepad-2") 741 | var Gamepad = Icon("gamepad") 742 | var Gauge = Icon("gauge") 743 | var Gavel = Icon("gavel") 744 | var Gem = Icon("gem") 745 | var Ghost = Icon("ghost") 746 | var Gift = Icon("gift") 747 | var GitBranchPlus = Icon("git-branch-plus") 748 | var GitBranch = Icon("git-branch") 749 | var GitCommitHorizontal = Icon("git-commit-horizontal") 750 | var GitCommitVertical = Icon("git-commit-vertical") 751 | var GitCompareArrows = Icon("git-compare-arrows") 752 | var GitCompare = Icon("git-compare") 753 | var GitFork = Icon("git-fork") 754 | var GitGraph = Icon("git-graph") 755 | var GitMerge = Icon("git-merge") 756 | var GitPullRequestArrow = Icon("git-pull-request-arrow") 757 | var GitPullRequestClosed = Icon("git-pull-request-closed") 758 | var GitPullRequestCreateArrow = Icon("git-pull-request-create-arrow") 759 | var GitPullRequestCreate = Icon("git-pull-request-create") 760 | var GitPullRequestDraft = Icon("git-pull-request-draft") 761 | var GitPullRequest = Icon("git-pull-request") 762 | var Github = Icon("github") 763 | var Gitlab = Icon("gitlab") 764 | var GlassWater = Icon("glass-water") 765 | var Glasses = Icon("glasses") 766 | var GlobeLock = Icon("globe-lock") 767 | var Globe = Icon("globe") 768 | var Goal = Icon("goal") 769 | var Grab = Icon("grab") 770 | var GraduationCap = Icon("graduation-cap") 771 | var Grape = Icon("grape") 772 | var Grid2x2Check = Icon("grid-2x2-check") 773 | var Grid2x2Plus = Icon("grid-2x2-plus") 774 | var Grid2x2X = Icon("grid-2x2-x") 775 | var Grid2x2 = Icon("grid-2x2") 776 | var Inbox = Icon("inbox") 777 | var HousePlug = Icon("house-plug") 778 | var HousePlus = Icon("house-plus") 779 | var HouseWifi = Icon("house-wifi") 780 | var House = Icon("house") 781 | var IceCreamBowl = Icon("ice-cream-bowl") 782 | var IceCreamCone = Icon("ice-cream-cone") 783 | var IdCard = Icon("id-card") 784 | var Hourglass = Icon("hourglass") 785 | var IndentDecrease = Icon("indent-decrease") 786 | var IndentIncrease = Icon("indent-increase") 787 | var IndianRupee = Icon("indian-rupee") 788 | var Infinity = Icon("infinity") 789 | var Info = Icon("info") 790 | var InspectionPanel = Icon("inspection-panel") 791 | var Instagram = Icon("instagram") 792 | var Italic = Icon("italic") 793 | var IterationCcw = Icon("iteration-ccw") 794 | var IterationCw = Icon("iteration-cw") 795 | var JapaneseYen = Icon("japanese-yen") 796 | var Joystick = Icon("joystick") 797 | var Kanban = Icon("kanban") 798 | var KeyRound = Icon("key-round") 799 | var KeySquare = Icon("key-square") 800 | var Key = Icon("key") 801 | var KeyboardMusic = Icon("keyboard-music") 802 | var KeyboardOff = Icon("keyboard-off") 803 | var ImageDown = Icon("image-down") 804 | var ImageUpscale = Icon("image-upscale") 805 | var Image = Icon("image") 806 | var Images = Icon("images") 807 | var Import = Icon("import") 808 | var ImageOff = Icon("image-off") 809 | var ImageMinus = Icon("image-minus") 810 | var Mailbox = Icon("mailbox") 811 | var LampCeiling = Icon("lamp-ceiling") 812 | var ImageUp = Icon("image-up") 813 | var ImagePlay = Icon("image-play") 814 | var ImagePlus = Icon("image-plus") 815 | var ListEnd = Icon("list-end") 816 | var LampFloor = Icon("lamp-floor") 817 | var LampWallDown = Icon("lamp-wall-down") 818 | var LampWallUp = Icon("lamp-wall-up") 819 | var Lamp = Icon("lamp") 820 | var LandPlot = Icon("land-plot") 821 | var Landmark = Icon("landmark") 822 | var Languages = Icon("languages") 823 | var LaptopMinimalCheck = Icon("laptop-minimal-check") 824 | var LaptopMinimal = Icon("laptop-minimal") 825 | var Laptop = Icon("laptop") 826 | var LassoSelect = Icon("lasso-select") 827 | var LampDesk = Icon("lamp-desk") 828 | var ListFilterPlus = Icon("list-filter-plus") 829 | var ListFilter = Icon("list-filter") 830 | var ListMinus = Icon("list-minus") 831 | var ListMusic = Icon("list-music") 832 | var ListOrdered = Icon("list-ordered") 833 | var ListPlus = Icon("list-plus") 834 | var ListRestart = Icon("list-restart") 835 | var ListStart = Icon("list-start") 836 | var ListTodo = Icon("list-todo") 837 | var ListTree = Icon("list-tree") 838 | var ListVideo = Icon("list-video") 839 | var ListX = Icon("list-x") 840 | var List = Icon("list") 841 | var LoaderCircle = Icon("loader-circle") 842 | var LoaderPinwheel = Icon("loader-pinwheel") 843 | var Loader = Icon("loader") 844 | var LocateFixed = Icon("locate-fixed") 845 | var LocateOff = Icon("locate-off") 846 | var Locate = Icon("locate") 847 | var Lasso = Icon("lasso") 848 | var Laugh = Icon("laugh") 849 | var Layers2 = Icon("layers-2") 850 | var Layers = Icon("layers") 851 | var LayoutDashboard = Icon("layout-dashboard") 852 | var LayoutGrid = Icon("layout-grid") 853 | var LayoutList = Icon("layout-list") 854 | var LayoutPanelLeft = Icon("layout-panel-left") 855 | var LayoutPanelTop = Icon("layout-panel-top") 856 | var LayoutTemplate = Icon("layout-template") 857 | var Leaf = Icon("leaf") 858 | var LeafyGreen = Icon("leafy-green") 859 | var Lectern = Icon("lectern") 860 | var LetterText = Icon("letter-text") 861 | var LibraryBig = Icon("library-big") 862 | var LocationEdit = Icon("location-edit") 863 | var LockKeyholeOpen = Icon("lock-keyhole-open") 864 | var LockKeyhole = Icon("lock-keyhole") 865 | var LockOpen = Icon("lock-open") 866 | var Lock = Icon("lock") 867 | var LogIn = Icon("log-in") 868 | var LogOut = Icon("log-out") 869 | var Logs = Icon("logs") 870 | var Lollipop = Icon("lollipop") 871 | var Luggage = Icon("luggage") 872 | var Magnet = Icon("magnet") 873 | var MailCheck = Icon("mail-check") 874 | var MailMinus = Icon("mail-minus") 875 | var MailOpen = Icon("mail-open") 876 | var MailPlus = Icon("mail-plus") 877 | var MailQuestion = Icon("mail-question") 878 | var Library = Icon("library") 879 | var LifeBuoy = Icon("life-buoy") 880 | var Ligature = Icon("ligature") 881 | var LightbulbOff = Icon("lightbulb-off") 882 | var Lightbulb = Icon("lightbulb") 883 | var Link2Off = Icon("link-2-off") 884 | var Link2 = Icon("link-2") 885 | var Link = Icon("link") 886 | var Linkedin = Icon("linkedin") 887 | var ListCheck = Icon("list-check") 888 | var ListChecks = Icon("list-checks") 889 | var ListCollapse = Icon("list-collapse") 890 | var MailX = Icon("mail-x") 891 | var MailWarning = Icon("mail-warning") 892 | var Mail = Icon("mail") 893 | var MoveLeft = Icon("move-left") 894 | var MailSearch = Icon("mail-search") 895 | var PanelBottomDashed = Icon("panel-bottom-dashed") 896 | var MoveRight = Icon("move-right") 897 | var MoveUpLeft = Icon("move-up-left") 898 | var MoveUpRight = Icon("move-up-right") 899 | var MoveUp = Icon("move-up") 900 | var MoveVertical = Icon("move-vertical") 901 | var Move = Icon("move") 902 | var Music2 = Icon("music-2") 903 | var Music3 = Icon("music-3") 904 | var Music4 = Icon("music-4") 905 | var Music = Icon("music") 906 | var Navigation2Off = Icon("navigation-2-off") 907 | var Mails = Icon("mails") 908 | var MapPinCheckInside = Icon("map-pin-check-inside") 909 | var MapPinCheck = Icon("map-pin-check") 910 | var MapPinHouse = Icon("map-pin-house") 911 | var MapPinMinusInside = Icon("map-pin-minus-inside") 912 | var MapPinMinus = Icon("map-pin-minus") 913 | var MapPinOff = Icon("map-pin-off") 914 | var MapPinPlusInside = Icon("map-pin-plus-inside") 915 | var MapPinPlus = Icon("map-pin-plus") 916 | var MapPinXInside = Icon("map-pin-x-inside") 917 | var MapPinX = Icon("map-pin-x") 918 | var MapPin = Icon("map-pin") 919 | var MapPinned = Icon("map-pinned") 920 | var MapPlus = Icon("map-plus") 921 | var Map = Icon("map") 922 | var MarsStroke = Icon("mars-stroke") 923 | var Mars = Icon("mars") 924 | var Martini = Icon("martini") 925 | var Maximize2 = Icon("maximize-2") 926 | var Maximize = Icon("maximize") 927 | var Medal = Icon("medal") 928 | var MegaphoneOff = Icon("megaphone-off") 929 | var Megaphone = Icon("megaphone") 930 | var Meh = Icon("meh") 931 | var MemoryStick = Icon("memory-stick") 932 | var Menu = Icon("menu") 933 | var Merge = Icon("merge") 934 | var MessageCircleCode = Icon("message-circle-code") 935 | var MessageCircleDashed = Icon("message-circle-dashed") 936 | var MessageCircleHeart = Icon("message-circle-heart") 937 | var MessageCircleMore = Icon("message-circle-more") 938 | var MessageCircleOff = Icon("message-circle-off") 939 | var MessageCirclePlus = Icon("message-circle-plus") 940 | var MessageCircleQuestion = Icon("message-circle-question") 941 | var MessageCircleReply = Icon("message-circle-reply") 942 | var MessageCircleWarning = Icon("message-circle-warning") 943 | var MessageCircleX = Icon("message-circle-x") 944 | var MessageCircle = Icon("message-circle") 945 | var MessageSquareCode = Icon("message-square-code") 946 | var MessageSquareDashed = Icon("message-square-dashed") 947 | var MessageSquareDiff = Icon("message-square-diff") 948 | var MessageSquareDot = Icon("message-square-dot") 949 | var MessageSquareHeart = Icon("message-square-heart") 950 | var MessageSquareLock = Icon("message-square-lock") 951 | var MessageSquareMore = Icon("message-square-more") 952 | var MessageSquareOff = Icon("message-square-off") 953 | var MessageSquarePlus = Icon("message-square-plus") 954 | var MessageSquareQuote = Icon("message-square-quote") 955 | var MessageSquareReply = Icon("message-square-reply") 956 | var MessageSquareShare = Icon("message-square-share") 957 | var MessageSquareText = Icon("message-square-text") 958 | var MessageSquareWarning = Icon("message-square-warning") 959 | var MessageSquareX = Icon("message-square-x") 960 | var MessageSquare = Icon("message-square") 961 | var MessagesSquare = Icon("messages-square") 962 | var MicOff = Icon("mic-off") 963 | var MicVocal = Icon("mic-vocal") 964 | var Navigation2 = Icon("navigation-2") 965 | var NavigationOff = Icon("navigation-off") 966 | var Navigation = Icon("navigation") 967 | var Network = Icon("network") 968 | var Newspaper = Icon("newspaper") 969 | var Nfc = Icon("nfc") 970 | var NonBinary = Icon("non-binary") 971 | var NotebookPen = Icon("notebook-pen") 972 | var NotebookTabs = Icon("notebook-tabs") 973 | var NotebookText = Icon("notebook-text") 974 | var Notebook = Icon("notebook") 975 | var NotepadTextDashed = Icon("notepad-text-dashed") 976 | var NotepadText = Icon("notepad-text") 977 | var NutOff = Icon("nut-off") 978 | var Nut = Icon("nut") 979 | var OctagonAlert = Icon("octagon-alert") 980 | var OctagonMinus = Icon("octagon-minus") 981 | var OctagonPause = Icon("octagon-pause") 982 | var OctagonX = Icon("octagon-x") 983 | var Octagon = Icon("octagon") 984 | var Omega = Icon("omega") 985 | var Option = Icon("option") 986 | var Orbit = Icon("orbit") 987 | var Origami = Icon("origami") 988 | var Package2 = Icon("package-2") 989 | var PackageCheck = Icon("package-check") 990 | var PackageMinus = Icon("package-minus") 991 | var PackageOpen = Icon("package-open") 992 | var PackagePlus = Icon("package-plus") 993 | var PackageSearch = Icon("package-search") 994 | var PackageX = Icon("package-x") 995 | var Package = Icon("package") 996 | var PaintBucket = Icon("paint-bucket") 997 | var PaintRoller = Icon("paint-roller") 998 | var PaintbrushVertical = Icon("paintbrush-vertical") 999 | var Paintbrush = Icon("paintbrush") 1000 | var Palette = Icon("palette") 1001 | var Panda = Icon("panda") 1002 | var PanelBottomClose = Icon("panel-bottom-close") 1003 | var Mic = Icon("mic") 1004 | var Pointer = Icon("pointer") 1005 | var PanelBottomOpen = Icon("panel-bottom-open") 1006 | var PanelBottom = Icon("panel-bottom") 1007 | var PanelLeftClose = Icon("panel-left-close") 1008 | var PanelLeftDashed = Icon("panel-left-dashed") 1009 | var PanelLeftOpen = Icon("panel-left-open") 1010 | var PanelLeft = Icon("panel-left") 1011 | var PanelRightClose = Icon("panel-right-close") 1012 | var PanelRightDashed = Icon("panel-right-dashed") 1013 | var PanelRightOpen = Icon("panel-right-open") 1014 | var PanelRight = Icon("panel-right") 1015 | var PanelTopClose = Icon("panel-top-close") 1016 | var PanelTopDashed = Icon("panel-top-dashed") 1017 | var PanelTopOpen = Icon("panel-top-open") 1018 | var PanelTop = Icon("panel-top") 1019 | var PanelsLeftBottom = Icon("panels-left-bottom") 1020 | var PanelsRightBottom = Icon("panels-right-bottom") 1021 | var PanelsTopLeft = Icon("panels-top-left") 1022 | var Paperclip = Icon("paperclip") 1023 | var Parentheses = Icon("parentheses") 1024 | var ParkingMeter = Icon("parking-meter") 1025 | var PartyPopper = Icon("party-popper") 1026 | var Pause = Icon("pause") 1027 | var PawPrint = Icon("paw-print") 1028 | var PcCase = Icon("pc-case") 1029 | var PenLine = Icon("pen-line") 1030 | var PenOff = Icon("pen-off") 1031 | var PenTool = Icon("pen-tool") 1032 | var Pen = Icon("pen") 1033 | var Highlighter = Icon("highlighter") 1034 | var PilcrowLeft = Icon("pilcrow-left") 1035 | var PencilOff = Icon("pencil-off") 1036 | var PencilRuler = Icon("pencil-ruler") 1037 | var Pencil = Icon("pencil") 1038 | var Pentagon = Icon("pentagon") 1039 | var Microchip = Icon("microchip") 1040 | var Microscope = Icon("microscope") 1041 | var Microwave = Icon("microwave") 1042 | var Milestone = Icon("milestone") 1043 | var MilkOff = Icon("milk-off") 1044 | var Milk = Icon("milk") 1045 | var Minimize2 = Icon("minimize-2") 1046 | var Minimize = Icon("minimize") 1047 | var Minus = Icon("minus") 1048 | var MonitorCheck = Icon("monitor-check") 1049 | var MonitorCog = Icon("monitor-cog") 1050 | var MonitorDot = Icon("monitor-dot") 1051 | var MonitorDown = Icon("monitor-down") 1052 | var MonitorOff = Icon("monitor-off") 1053 | var MonitorPause = Icon("monitor-pause") 1054 | var MonitorPlay = Icon("monitor-play") 1055 | var MonitorSmartphone = Icon("monitor-smartphone") 1056 | var MonitorSpeaker = Icon("monitor-speaker") 1057 | var Percent = Icon("percent") 1058 | var PersonStanding = Icon("person-standing") 1059 | var PhilippinePeso = Icon("philippine-peso") 1060 | var PhoneCall = Icon("phone-call") 1061 | var PhoneForwarded = Icon("phone-forwarded") 1062 | var PhoneIncoming = Icon("phone-incoming") 1063 | var PhoneMissed = Icon("phone-missed") 1064 | var PhoneOff = Icon("phone-off") 1065 | var PhoneOutgoing = Icon("phone-outgoing") 1066 | var Phone = Icon("phone") 1067 | var Pi = Icon("pi") 1068 | var Piano = Icon("piano") 1069 | var Pickaxe = Icon("pickaxe") 1070 | var PictureInPicture2 = Icon("picture-in-picture-2") 1071 | var PictureInPicture = Icon("picture-in-picture") 1072 | var PiggyBank = Icon("piggy-bank") 1073 | var PlaneTakeoff = Icon("plane-takeoff") 1074 | var PilcrowRight = Icon("pilcrow-right") 1075 | var Pilcrow = Icon("pilcrow") 1076 | var PillBottle = Icon("pill-bottle") 1077 | var Pill = Icon("pill") 1078 | var PinOff = Icon("pin-off") 1079 | var Pin = Icon("pin") 1080 | var Pipette = Icon("pipette") 1081 | var Pizza = Icon("pizza") 1082 | var PlaneLanding = Icon("plane-landing") 1083 | var RotateCcwKey = Icon("rotate-ccw-key") 1084 | var Popcorn = Icon("popcorn") 1085 | var Popsicle = Icon("popsicle") 1086 | var MonitorStop = Icon("monitor-stop") 1087 | var PoundSterling = Icon("pound-sterling") 1088 | var PowerOff = Icon("power-off") 1089 | var Power = Icon("power") 1090 | var Presentation = Icon("presentation") 1091 | var PrinterCheck = Icon("printer-check") 1092 | var MonitorUp = Icon("monitor-up") 1093 | var Printer = Icon("printer") 1094 | var MonitorX = Icon("monitor-x") 1095 | var Monitor = Icon("monitor") 1096 | var MoonStar = Icon("moon-star") 1097 | var Moon = Icon("moon") 1098 | var MountainSnow = Icon("mountain-snow") 1099 | var Mountain = Icon("mountain") 1100 | var MouseOff = Icon("mouse-off") 1101 | var MousePointer2 = Icon("mouse-pointer-2") 1102 | var Projector = Icon("projector") 1103 | var MousePointerBan = Icon("mouse-pointer-ban") 1104 | var MousePointerClick = Icon("mouse-pointer-click") 1105 | var MousePointer = Icon("mouse-pointer") 1106 | var Mouse = Icon("mouse") 1107 | var Move3d = Icon("move-3d") 1108 | var MoveDiagonal2 = Icon("move-diagonal-2") 1109 | var MoveDiagonal = Icon("move-diagonal") 1110 | var MoveDownLeft = Icon("move-down-left") 1111 | var MoveDownRight = Icon("move-down-right") 1112 | var MoveDown = Icon("move-down") 1113 | var MoveHorizontal = Icon("move-horizontal") 1114 | var RectangleGoggles = Icon("rectangle-goggles") 1115 | var Puzzle = Icon("puzzle") 1116 | var Pyramid = Icon("pyramid") 1117 | var QrCode = Icon("qr-code") 1118 | var Quote = Icon("quote") 1119 | var Rabbit = Icon("rabbit") 1120 | var Radar = Icon("radar") 1121 | var Radiation = Icon("radiation") 1122 | var Radical = Icon("radical") 1123 | var RadioReceiver = Icon("radio-receiver") 1124 | var RadioTower = Icon("radio-tower") 1125 | var Radio = Icon("radio") 1126 | var Radius = Icon("radius") 1127 | var RailSymbol = Icon("rail-symbol") 1128 | var Rainbow = Icon("rainbow") 1129 | var Rat = Icon("rat") 1130 | var Ratio = Icon("ratio") 1131 | var ReceiptCent = Icon("receipt-cent") 1132 | var ReceiptEuro = Icon("receipt-euro") 1133 | var ReceiptIndianRupee = Icon("receipt-indian-rupee") 1134 | var ReceiptJapaneseYen = Icon("receipt-japanese-yen") 1135 | var ReceiptPoundSterling = Icon("receipt-pound-sterling") 1136 | var ReceiptRussianRuble = Icon("receipt-russian-ruble") 1137 | var ReceiptSwissFranc = Icon("receipt-swiss-franc") 1138 | var ReceiptText = Icon("receipt-text") 1139 | var Receipt = Icon("receipt") 1140 | var RectangleEllipsis = Icon("rectangle-ellipsis") 1141 | var RemoveFormatting = Icon("remove-formatting") 1142 | var CloudLightning = Icon("cloud-lightning") 1143 | var Reply = Icon("reply") 1144 | var Repeat1 = Icon("repeat-1") 1145 | var Proportions = Icon("proportions") 1146 | var ChevronFirst = Icon("chevron-first") 1147 | var Plug = Icon("plug") 1148 | var Plane = Icon("plane") 1149 | var Play = Icon("play") 1150 | var Plug2 = Icon("plug-2") 1151 | var PlugZap = Icon("plug-zap") 1152 | var Shell = Icon("shell") 1153 | var RotateCcwSquare = Icon("rotate-ccw-square") 1154 | var RotateCcw = Icon("rotate-ccw") 1155 | var RotateCwSquare = Icon("rotate-cw-square") 1156 | var RotateCw = Icon("rotate-cw") 1157 | var RouteOff = Icon("route-off") 1158 | var Route = Icon("route") 1159 | var Router = Icon("router") 1160 | var Rows2 = Icon("rows-2") 1161 | var Rows3 = Icon("rows-3") 1162 | var Rows4 = Icon("rows-4") 1163 | var Rss = Icon("rss") 1164 | var RulerDimensionLine = Icon("ruler-dimension-line") 1165 | var Ruler = Icon("ruler") 1166 | var RussianRuble = Icon("russian-ruble") 1167 | var Sailboat = Icon("sailboat") 1168 | var Salad = Icon("salad") 1169 | var Sandwich = Icon("sandwich") 1170 | var SatelliteDish = Icon("satellite-dish") 1171 | var Satellite = Icon("satellite") 1172 | var SaudiRiyal = Icon("saudi-riyal") 1173 | var SaveAll = Icon("save-all") 1174 | var SaveOff = Icon("save-off") 1175 | var Save = Icon("save") 1176 | var Scale3d = Icon("scale-3d") 1177 | var Scale = Icon("scale") 1178 | var Scaling = Icon("scaling") 1179 | var ScanBarcode = Icon("scan-barcode") 1180 | var ScanEye = Icon("scan-eye") 1181 | var ScanFace = Icon("scan-face") 1182 | var ScanHeart = Icon("scan-heart") 1183 | var ScanLine = Icon("scan-line") 1184 | var ScanQrCode = Icon("scan-qr-code") 1185 | var ScanSearch = Icon("scan-search") 1186 | var ScanText = Icon("scan-text") 1187 | var Scan = Icon("scan") 1188 | var School = Icon("school") 1189 | var ScissorsLineDashed = Icon("scissors-line-dashed") 1190 | var Scissors = Icon("scissors") 1191 | var ScreenShareOff = Icon("screen-share-off") 1192 | var ScreenShare = Icon("screen-share") 1193 | var ScrollText = Icon("scroll-text") 1194 | var Scroll = Icon("scroll") 1195 | var SearchCheck = Icon("search-check") 1196 | var SearchCode = Icon("search-code") 1197 | var SearchSlash = Icon("search-slash") 1198 | var SearchX = Icon("search-x") 1199 | var Search = Icon("search") 1200 | var Section = Icon("section") 1201 | var SendHorizontal = Icon("send-horizontal") 1202 | var SendToBack = Icon("send-to-back") 1203 | var Send = Icon("send") 1204 | var SeparatorHorizontal = Icon("separator-horizontal") 1205 | var SeparatorVertical = Icon("separator-vertical") 1206 | var ServerCog = Icon("server-cog") 1207 | var ServerCrash = Icon("server-crash") 1208 | var ServerOff = Icon("server-off") 1209 | var Server = Icon("server") 1210 | var Settings2 = Icon("settings-2") 1211 | var Settings = Icon("settings") 1212 | var Shapes = Icon("shapes") 1213 | var Share2 = Icon("share-2") 1214 | var Share = Icon("share") 1215 | var Sheet = Icon("sheet") 1216 | var Clock1 = Icon("clock-1") 1217 | var RefreshCcwDot = Icon("refresh-ccw-dot") 1218 | var RectangleVertical = Icon("rectangle-vertical") 1219 | var Recycle = Icon("recycle") 1220 | var Redo2 = Icon("redo-2") 1221 | var RedoDot = Icon("redo-dot") 1222 | var Redo = Icon("redo") 1223 | var SquareArrowOutUpLeft = Icon("square-arrow-out-up-left") 1224 | var ShieldAlert = Icon("shield-alert") 1225 | var ShieldBan = Icon("shield-ban") 1226 | var ShieldCheck = Icon("shield-check") 1227 | var ShieldEllipsis = Icon("shield-ellipsis") 1228 | var ShieldHalf = Icon("shield-half") 1229 | var ShieldMinus = Icon("shield-minus") 1230 | var ShieldOff = Icon("shield-off") 1231 | var ShieldPlus = Icon("shield-plus") 1232 | var ShieldQuestion = Icon("shield-question") 1233 | var ShieldUser = Icon("shield-user") 1234 | var ShieldX = Icon("shield-x") 1235 | var Shield = Icon("shield") 1236 | var ShipWheel = Icon("ship-wheel") 1237 | var Ship = Icon("ship") 1238 | var Shirt = Icon("shirt") 1239 | var ShoppingBag = Icon("shopping-bag") 1240 | var ShoppingBasket = Icon("shopping-basket") 1241 | var ShoppingCart = Icon("shopping-cart") 1242 | var Shovel = Icon("shovel") 1243 | var ShowerHead = Icon("shower-head") 1244 | var Shredder = Icon("shredder") 1245 | var Shrimp = Icon("shrimp") 1246 | var Shrink = Icon("shrink") 1247 | var Shrub = Icon("shrub") 1248 | var Shuffle = Icon("shuffle") 1249 | var Sigma = Icon("sigma") 1250 | var SignalHigh = Icon("signal-high") 1251 | var SignalLow = Icon("signal-low") 1252 | var SignalMedium = Icon("signal-medium") 1253 | var SignalZero = Icon("signal-zero") 1254 | var Signal = Icon("signal") 1255 | var Signature = Icon("signature") 1256 | var SignpostBig = Icon("signpost-big") 1257 | var Signpost = Icon("signpost") 1258 | var Siren = Icon("siren") 1259 | var SkipBack = Icon("skip-back") 1260 | var SkipForward = Icon("skip-forward") 1261 | var Skull = Icon("skull") 1262 | var Slack = Icon("slack") 1263 | var Slash = Icon("slash") 1264 | var Slice = Icon("slice") 1265 | var SlidersHorizontal = Icon("sliders-horizontal") 1266 | var SlidersVertical = Icon("sliders-vertical") 1267 | var SmartphoneCharging = Icon("smartphone-charging") 1268 | var SmartphoneNfc = Icon("smartphone-nfc") 1269 | var Smartphone = Icon("smartphone") 1270 | var SmilePlus = Icon("smile-plus") 1271 | var Smile = Icon("smile") 1272 | var Snail = Icon("snail") 1273 | var Snowflake = Icon("snowflake") 1274 | var SoapDispenserDroplet = Icon("soap-dispenser-droplet") 1275 | var Sofa = Icon("sofa") 1276 | var Soup = Icon("soup") 1277 | var Space = Icon("space") 1278 | var Spade = Icon("spade") 1279 | var Sparkle = Icon("sparkle") 1280 | var Sparkles = Icon("sparkles") 1281 | var Speaker = Icon("speaker") 1282 | var Speech = Icon("speech") 1283 | var SpellCheck2 = Icon("spell-check-2") 1284 | var SpellCheck = Icon("spell-check") 1285 | var SplinePointer = Icon("spline-pointer") 1286 | var Spline = Icon("spline") 1287 | var Split = Icon("split") 1288 | var SprayCan = Icon("spray-can") 1289 | var Sprout = Icon("sprout") 1290 | var ReplaceAll = Icon("replace-all") 1291 | var Repeat = Icon("repeat") 1292 | var RefreshCw = Icon("refresh-cw") 1293 | var RefreshCcw = Icon("refresh-ccw") 1294 | var RefreshCwOff = Icon("refresh-cw-off") 1295 | var Replace = Icon("replace") 1296 | var SquareArrowDown = Icon("square-arrow-down") 1297 | var SquareArrowDownLeft = Icon("square-arrow-down-left") 1298 | var SquareArrowDownRight = Icon("square-arrow-down-right") 1299 | var Refrigerator = Icon("refrigerator") 1300 | var SquareArrowOutDownLeft = Icon("square-arrow-out-down-left") 1301 | var SquareArrowLeft = Icon("square-arrow-left") 1302 | var SunMedium = Icon("sun-medium") 1303 | var SquareActivity = Icon("square-activity") 1304 | var SquareArrowOutDownRight = Icon("square-arrow-out-down-right") 1305 | var ReplyAll = Icon("reply-all") 1306 | var TextCursorInput = Icon("text-cursor-input") 1307 | var SunMoon = Icon("sun-moon") 1308 | var SunSnow = Icon("sun-snow") 1309 | var Sun = Icon("sun") 1310 | var Sunrise = Icon("sunrise") 1311 | var Sunset = Icon("sunset") 1312 | var Superscript = Icon("superscript") 1313 | var SwatchBook = Icon("swatch-book") 1314 | var SwissFranc = Icon("swiss-franc") 1315 | var SwitchCamera = Icon("switch-camera") 1316 | var Sword = Icon("sword") 1317 | var Swords = Icon("swords") 1318 | var Syringe = Icon("syringe") 1319 | var Table2 = Icon("table-2") 1320 | var TableCellsMerge = Icon("table-cells-merge") 1321 | var TableCellsSplit = Icon("table-cells-split") 1322 | var TableColumnsSplit = Icon("table-columns-split") 1323 | var TableOfContents = Icon("table-of-contents") 1324 | var TableProperties = Icon("table-properties") 1325 | var TableRowsSplit = Icon("table-rows-split") 1326 | var Table = Icon("table") 1327 | var TabletSmartphone = Icon("tablet-smartphone") 1328 | var Tablet = Icon("tablet") 1329 | var Tablets = Icon("tablets") 1330 | var Tag = Icon("tag") 1331 | var Tags = Icon("tags") 1332 | var Tally1 = Icon("tally-1") 1333 | var Tally2 = Icon("tally-2") 1334 | var Tally3 = Icon("tally-3") 1335 | var Tally4 = Icon("tally-4") 1336 | var Tally5 = Icon("tally-5") 1337 | var Tangent = Icon("tangent") 1338 | var Target = Icon("target") 1339 | var Telescope = Icon("telescope") 1340 | var TentTree = Icon("tent-tree") 1341 | var Tent = Icon("tent") 1342 | var Terminal = Icon("terminal") 1343 | var TestTubeDiagonal = Icon("test-tube-diagonal") 1344 | var TestTube = Icon("test-tube") 1345 | var TestTubes = Icon("test-tubes") 1346 | var Pocket = Icon("pocket") 1347 | var Plus = Icon("plus") 1348 | var PocketKnife = Icon("pocket-knife") 1349 | var TrainFront = Icon("train-front") 1350 | var TextCursor = Icon("text-cursor") 1351 | var TextQuote = Icon("text-quote") 1352 | var TextSearch = Icon("text-search") 1353 | var SquareArrowOutUpRight = Icon("square-arrow-out-up-right") 1354 | var SquareArrowRight = Icon("square-arrow-right") 1355 | var SquareArrowUpLeft = Icon("square-arrow-up-left") 1356 | var SquareArrowUpRight = Icon("square-arrow-up-right") 1357 | var SquareArrowUp = Icon("square-arrow-up") 1358 | var SquareAsterisk = Icon("square-asterisk") 1359 | var SquareBottomDashedScissors = Icon("square-bottom-dashed-scissors") 1360 | var SquareChartGantt = Icon("square-chart-gantt") 1361 | var SquareCheckBig = Icon("square-check-big") 1362 | var SquareCheck = Icon("square-check") 1363 | var SquareChevronDown = Icon("square-chevron-down") 1364 | var SquareChevronLeft = Icon("square-chevron-left") 1365 | var SquareChevronRight = Icon("square-chevron-right") 1366 | var SquareChevronUp = Icon("square-chevron-up") 1367 | var SquareCode = Icon("square-code") 1368 | var SquareDashedBottomCode = Icon("square-dashed-bottom-code") 1369 | var SquareDashedBottom = Icon("square-dashed-bottom") 1370 | var SquareDashedKanban = Icon("square-dashed-kanban") 1371 | var SquareDashedMousePointer = Icon("square-dashed-mouse-pointer") 1372 | var TextSelect = Icon("text-select") 1373 | var Text = Icon("text") 1374 | var Theater = Icon("theater") 1375 | var ThermometerSnowflake = Icon("thermometer-snowflake") 1376 | var ThermometerSun = Icon("thermometer-sun") 1377 | var Thermometer = Icon("thermometer") 1378 | var ThumbsDown = Icon("thumbs-down") 1379 | var ThumbsUp = Icon("thumbs-up") 1380 | var TicketCheck = Icon("ticket-check") 1381 | var TicketMinus = Icon("ticket-minus") 1382 | var TicketPercent = Icon("ticket-percent") 1383 | var TicketPlus = Icon("ticket-plus") 1384 | var TicketSlash = Icon("ticket-slash") 1385 | var SquareDashed = Icon("square-dashed") 1386 | var SquareDivide = Icon("square-divide") 1387 | var SquareDot = Icon("square-dot") 1388 | var SquareEqual = Icon("square-equal") 1389 | var SquareFunction = Icon("square-function") 1390 | var SquareKanban = Icon("square-kanban") 1391 | var SquareLibrary = Icon("square-library") 1392 | var SquareM = Icon("square-m") 1393 | var SquareMenu = Icon("square-menu") 1394 | var SquareMinus = Icon("square-minus") 1395 | var SquareMousePointer = Icon("square-mouse-pointer") 1396 | var SquareParkingOff = Icon("square-parking-off") 1397 | var SquareParking = Icon("square-parking") 1398 | var SquarePen = Icon("square-pen") 1399 | var SquarePercent = Icon("square-percent") 1400 | var SquarePi = Icon("square-pi") 1401 | var SquarePilcrow = Icon("square-pilcrow") 1402 | var SquarePlay = Icon("square-play") 1403 | var SquarePlus = Icon("square-plus") 1404 | var SquarePower = Icon("square-power") 1405 | var SquareRadical = Icon("square-radical") 1406 | var SquareRoundCorner = Icon("square-round-corner") 1407 | var SquareScissors = Icon("square-scissors") 1408 | var SquareSigma = Icon("square-sigma") 1409 | var SquareSlash = Icon("square-slash") 1410 | var SquareSplitHorizontal = Icon("square-split-horizontal") 1411 | var SquareSplitVertical = Icon("square-split-vertical") 1412 | var SquareSquare = Icon("square-square") 1413 | var SquareStack = Icon("square-stack") 1414 | var SquareTerminal = Icon("square-terminal") 1415 | var SquareUserRound = Icon("square-user-round") 1416 | var SquareUser = Icon("square-user") 1417 | var SquareX = Icon("square-x") 1418 | var Square = Icon("square") 1419 | var SquaresExclude = Icon("squares-exclude") 1420 | var SquaresIntersect = Icon("squares-intersect") 1421 | var SquaresSubtract = Icon("squares-subtract") 1422 | var SquaresUnite = Icon("squares-unite") 1423 | var Squircle = Icon("squircle") 1424 | var Squirrel = Icon("squirrel") 1425 | var Stamp = Icon("stamp") 1426 | var StarHalf = Icon("star-half") 1427 | var StarOff = Icon("star-off") 1428 | var Star = Icon("star") 1429 | var StepBack = Icon("step-back") 1430 | var StepForward = Icon("step-forward") 1431 | var TicketX = Icon("ticket-x") 1432 | var Ticket = Icon("ticket") 1433 | var TicketsPlane = Icon("tickets-plane") 1434 | var Tickets = Icon("tickets") 1435 | var TimerOff = Icon("timer-off") 1436 | var TimerReset = Icon("timer-reset") 1437 | var Timer = Icon("timer") 1438 | var ToggleLeft = Icon("toggle-left") 1439 | var ToggleRight = Icon("toggle-right") 1440 | var Toilet = Icon("toilet") 1441 | var Tornado = Icon("tornado") 1442 | var Stethoscope = Icon("stethoscope") 1443 | var Sticker = Icon("sticker") 1444 | var StickyNote = Icon("sticky-note") 1445 | var Store = Icon("store") 1446 | var StretchHorizontal = Icon("stretch-horizontal") 1447 | var StretchVertical = Icon("stretch-vertical") 1448 | var Strikethrough = Icon("strikethrough") 1449 | var Subscript = Icon("subscript") 1450 | var SunDim = Icon("sun-dim") 1451 | var RockingChair = Icon("rocking-chair") 1452 | var Ribbon = Icon("ribbon") 1453 | var Rocket = Icon("rocket") 1454 | var Regex = Icon("regex") 1455 | var UserRoundCheck = Icon("user-round-check") 1456 | var TrainTrack = Icon("train-track") 1457 | var TramFront = Icon("tram-front") 1458 | var Transgender = Icon("transgender") 1459 | var Trash2 = Icon("trash-2") 1460 | var Trash = Icon("trash") 1461 | var TreeDeciduous = Icon("tree-deciduous") 1462 | var TreePalm = Icon("tree-palm") 1463 | var TreePine = Icon("tree-pine") 1464 | var Trees = Icon("trees") 1465 | var Trello = Icon("trello") 1466 | var TrendingDown = Icon("trending-down") 1467 | var TrendingUp = Icon("trending-up") 1468 | var TriangleAlert = Icon("triangle-alert") 1469 | var TrendingUpDown = Icon("trending-up-down") 1470 | var Torus = Icon("torus") 1471 | var TouchpadOff = Icon("touchpad-off") 1472 | var Touchpad = Icon("touchpad") 1473 | var TowerControl = Icon("tower-control") 1474 | var ToyBrick = Icon("toy-brick") 1475 | var Tractor = Icon("tractor") 1476 | var TrafficCone = Icon("traffic-cone") 1477 | var TrainFrontTunnel = Icon("train-front-tunnel") 1478 | var RollerCoaster = Icon("roller-coaster") 1479 | var Undo2 = Icon("undo-2") 1480 | var TriangleRight = Icon("triangle-right") 1481 | var Triangle = Icon("triangle") 1482 | var Trophy = Icon("trophy") 1483 | var TruckElectric = Icon("truck-electric") 1484 | var TriangleDashed = Icon("triangle-dashed") 1485 | var UndoDot = Icon("undo-dot") 1486 | var Undo = Icon("undo") 1487 | var UnfoldHorizontal = Icon("unfold-horizontal") 1488 | var UnfoldVertical = Icon("unfold-vertical") 1489 | var Ungroup = Icon("ungroup") 1490 | var University = Icon("university") 1491 | var Unlink2 = Icon("unlink-2") 1492 | var Unlink = Icon("unlink") 1493 | var Unplug = Icon("unplug") 1494 | var Upload = Icon("upload") 1495 | var Usb = Icon("usb") 1496 | var UserCheck = Icon("user-check") 1497 | var UserCog = Icon("user-cog") 1498 | var UserMinus = Icon("user-minus") 1499 | var UserPlus = Icon("user-plus") 1500 | var UserLock = Icon("user-lock") 1501 | var UserPen = Icon("user-pen") 1502 | var ZoomOut = Icon("zoom-out") 1503 | var UserRoundCog = Icon("user-round-cog") 1504 | var UserRoundMinus = Icon("user-round-minus") 1505 | var UserRoundPen = Icon("user-round-pen") 1506 | var UserRoundPlus = Icon("user-round-plus") 1507 | var UserRoundSearch = Icon("user-round-search") 1508 | var UserRoundX = Icon("user-round-x") 1509 | var UserRound = Icon("user-round") 1510 | var UserSearch = Icon("user-search") 1511 | var UserX = Icon("user-x") 1512 | var User = Icon("user") 1513 | var UsersRound = Icon("users-round") 1514 | var Users = Icon("users") 1515 | var UtensilsCrossed = Icon("utensils-crossed") 1516 | var Utensils = Icon("utensils") 1517 | var UtilityPole = Icon("utility-pole") 1518 | var Variable = Icon("variable") 1519 | var Vault = Icon("vault") 1520 | var Vegan = Icon("vegan") 1521 | var VenetianMask = Icon("venetian-mask") 1522 | var VenusAndMars = Icon("venus-and-mars") 1523 | var Venus = Icon("venus") 1524 | var VibrateOff = Icon("vibrate-off") 1525 | var Vibrate = Icon("vibrate") 1526 | var VideoOff = Icon("video-off") 1527 | var Video = Icon("video") 1528 | var Videotape = Icon("videotape") 1529 | var View = Icon("view") 1530 | var Voicemail = Icon("voicemail") 1531 | var Volleyball = Icon("volleyball") 1532 | var Volume1 = Icon("volume-1") 1533 | var Volume2 = Icon("volume-2") 1534 | var VolumeOff = Icon("volume-off") 1535 | var VolumeX = Icon("volume-x") 1536 | var Volume = Icon("volume") 1537 | var Vote = Icon("vote") 1538 | var WalletCards = Icon("wallet-cards") 1539 | var WalletMinimal = Icon("wallet-minimal") 1540 | var Wallet = Icon("wallet") 1541 | var Wallpaper = Icon("wallpaper") 1542 | var WandSparkles = Icon("wand-sparkles") 1543 | var Wand = Icon("wand") 1544 | var Warehouse = Icon("warehouse") 1545 | var WashingMachine = Icon("washing-machine") 1546 | var Watch = Icon("watch") 1547 | var WavesLadder = Icon("waves-ladder") 1548 | var Waves = Icon("waves") 1549 | var Waypoints = Icon("waypoints") 1550 | var Webcam = Icon("webcam") 1551 | var WebhookOff = Icon("webhook-off") 1552 | var Webhook = Icon("webhook") 1553 | var Weight = Icon("weight") 1554 | var WheatOff = Icon("wheat-off") 1555 | var Wheat = Icon("wheat") 1556 | var WholeWord = Icon("whole-word") 1557 | var WifiHigh = Icon("wifi-high") 1558 | var WifiLow = Icon("wifi-low") 1559 | var WifiOff = Icon("wifi-off") 1560 | var WifiPen = Icon("wifi-pen") 1561 | var WifiZero = Icon("wifi-zero") 1562 | var Wifi = Icon("wifi") 1563 | var WindArrowDown = Icon("wind-arrow-down") 1564 | var Wind = Icon("wind") 1565 | var WineOff = Icon("wine-off") 1566 | var Wine = Icon("wine") 1567 | var Workflow = Icon("workflow") 1568 | var Worm = Icon("worm") 1569 | var WrapText = Icon("wrap-text") 1570 | var Wrench = Icon("wrench") 1571 | var X = Icon("x") 1572 | var Youtube = Icon("youtube") 1573 | var ZapOff = Icon("zap-off") 1574 | var Zap = Icon("zap") 1575 | var ZoomIn = Icon("zoom-in") 1576 | var Podcast = Icon("podcast") 1577 | var Truck = Icon("truck") 1578 | var TypeOutline = Icon("type-outline") 1579 | var Type = Icon("type") 1580 | var UmbrellaOff = Icon("umbrella-off") 1581 | var Umbrella = Icon("umbrella") 1582 | var Underline = Icon("underline") 1583 | var TvMinimal = Icon("tv-minimal") 1584 | var Turtle = Icon("turtle") 1585 | var TvMinimalPlay = Icon("tv-minimal-play") 1586 | var Tv = Icon("tv") 1587 | var Twitch = Icon("twitch") 1588 | var PointerOff = Icon("pointer-off") 1589 | var Twitter = Icon("twitter") 1590 | var Rotate3d = Icon("rotate-3d") 1591 | var Repeat2 = Icon("repeat-2") 1592 | var Rewind = Icon("rewind") 1593 | var RectangleHorizontal = Icon("rectangle-horizontal") 1594 | var PencilLine = Icon("pencil-line") 1595 | var Heater = Icon("heater") 1596 | -------------------------------------------------------------------------------- /ui/layouts/base.templ: -------------------------------------------------------------------------------- 1 | package layouts 2 | 3 | import ( 4 | "github.com/axzilla/templui-quickstart/ui/modules" 5 | ) 6 | 7 | templ ThemeSwitcherScript() { 8 | {{ handle := templ.NewOnceHandle() }} 9 | @handle.Once() { 10 | 28 | } 29 | } 30 | 31 | templ BaseLayout() { 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | @ThemeSwitcherScript() 43 | 44 | 48 | @modules.Navbar() 49 | { children... } 50 | 51 | 52 | } 53 | -------------------------------------------------------------------------------- /ui/modules/navbar.templ: -------------------------------------------------------------------------------- 1 | package modules 2 | 3 | templ Navbar() { 4 | 9 | } 10 | -------------------------------------------------------------------------------- /ui/modules/themeswitcher.templ: -------------------------------------------------------------------------------- 1 | package modules 2 | 3 | import "github.com/axzilla/templui-quickstart/ui/components/button" 4 | import "github.com/axzilla/templui-quickstart/ui/components/icon" 5 | 6 | templ themeSwitcherHandler() { 7 | {{ handle := templ.NewOnceHandle() }} 8 | @handle.Once() { 9 | 21 | } 22 | } 23 | 24 | type ThemeSwitcherProps struct { 25 | Class string 26 | } 27 | 28 | templ ThemeSwitcher(props ...ThemeSwitcherProps) { 29 | {{ var p ThemeSwitcherProps }} 30 | if len(props) > 0 { 31 | {{ p = props[0] }} 32 | } 33 | @themeSwitcherHandler() 34 | @button.Button(button.Props{ 35 | Size: button.SizeIcon, 36 | Variant: button.VariantGhost, 37 | Class: p.Class, 38 | Attributes: templ.Attributes{ 39 | "@click": "toggleTheme", 40 | }, 41 | }) { 42 | @DynamicThemeIcon() 43 | } 44 | } 45 | 46 | templ DynamicThemeIcon() { 47 |
48 | 49 | @LightIcon() 50 | 51 | 52 | @DarkIcon() 53 | 54 |
55 | } 56 | 57 | templ DarkIcon() { 58 | @icon.Moon() 59 | } 60 | 61 | templ LightIcon() { 62 | @icon.SunMedium() 63 | } 64 | -------------------------------------------------------------------------------- /ui/pages/landing.templ: -------------------------------------------------------------------------------- 1 | package pages 2 | 3 | import ( 4 | "github.com/axzilla/templui-quickstart/ui/components/button" 5 | "github.com/axzilla/templui-quickstart/ui/layouts" 6 | ) 7 | 8 | templ Landing() { 9 | @layouts.BaseLayout() { 10 |
11 |
12 |
13 |

🚀 Welcome to templUI Quickstart

14 |

15 | Your project is ready! ✨ Check out the documentation for guides and examples, 16 | or visit GitHub to stay up to date. Let's build something great! 🎨 17 |

18 |
19 |
20 | @button.Button(button.Props{ 21 | Variant: "default", 22 | Href: "https://templui.io", 23 | Target: "_blank", 24 | }) { 25 | Documentation 26 | } 27 | @button.Button(button.Props{ 28 | Variant: "outline", 29 | Href: "https://github.com/axzilla/templui", 30 | Target: "_blank", 31 | }) { 32 | GitHub 33 | } 34 |
35 |

36 | Questions? Join our community discussions 👋 37 |

38 |
39 |
40 | } 41 | } 42 | -------------------------------------------------------------------------------- /utils/templui.go: -------------------------------------------------------------------------------- 1 | // templui util templui.go - version: main installed by templui v0.73.1 2 | package utils 3 | 4 | import ( 5 | "fmt" 6 | 7 | "crypto/rand" 8 | 9 | "github.com/a-h/templ" 10 | 11 | twmerge "github.com/Oudwins/tailwind-merge-go" 12 | ) 13 | 14 | // TwMerge combines Tailwind classes and resolves conflicts. 15 | // Example: "bg-red-500 hover:bg-blue-500", "bg-green-500" → "hover:bg-blue-500 bg-green-500" 16 | func TwMerge(classes ...string) string { 17 | return twmerge.Merge(classes...) 18 | } 19 | 20 | // TwIf returns value if condition is true, otherwise an empty value of type T. 21 | // Example: true, "bg-red-500" → "bg-red-500" 22 | func If[T comparable](condition bool, value T) T { 23 | var empty T 24 | if condition { 25 | return value 26 | } 27 | return empty 28 | } 29 | 30 | // TwIfElse returns trueValue if condition is true, otherwise falseValue. 31 | // Example: true, "bg-red-500", "bg-gray-300" → "bg-red-500" 32 | func IfElse[T any](condition bool, trueValue T, falseValue T) T { 33 | if condition { 34 | return trueValue 35 | } 36 | return falseValue 37 | } 38 | 39 | // MergeAttributes combines multiple Attributes into one. 40 | // Example: MergeAttributes(attr1, attr2) → combined attributes 41 | func MergeAttributes(attrs ...templ.Attributes) templ.Attributes { 42 | merged := templ.Attributes{} 43 | for _, attr := range attrs { 44 | for k, v := range attr { 45 | merged[k] = v 46 | } 47 | } 48 | return merged 49 | } 50 | 51 | // RandomID generates a random ID string. 52 | // Example: RandomID() → "id-1a2b3c" 53 | func RandomID() string { 54 | return fmt.Sprintf("id-%s", rand.Text()) 55 | } 56 | --------------------------------------------------------------------------------