{"id":22434684,"url":"https://github.com/indaco/templheroicons","last_synced_at":"2025-03-27T08:15:44.374Z","repository":{"id":266456667,"uuid":"898391382","full_name":"indaco/templheroicons","owner":"indaco","description":"The Heroicons set as Go Templ components.","archived":false,"fork":false,"pushed_at":"2025-02-01T09:58:36.000Z","size":585,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T10:27:43.024Z","etag":null,"topics":["components","heroicons","icons","templ"],"latest_commit_sha":null,"homepage":"","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/indaco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-04T10:05:14.000Z","updated_at":"2025-02-01T09:57:38.000Z","dependencies_parsed_at":"2024-12-04T11:28:17.911Z","dependency_job_id":"0d0c11e6-59e7-4d8a-b717-832078639fb7","html_url":"https://github.com/indaco/templheroicons","commit_stats":null,"previous_names":["indaco/templheroicons"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indaco%2Ftemplheroicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indaco%2Ftemplheroicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indaco%2Ftemplheroicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indaco%2Ftemplheroicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/indaco","download_url":"https://codeload.github.com/indaco/templheroicons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245806459,"owners_count":20675298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","heroicons","icons","templ"],"created_at":"2024-12-05T23:10:11.242Z","updated_at":"2025-03-27T08:15:44.355Z","avatar_url":"https://github.com/indaco.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" style=\"font-size: 2.5rem;\"\u003e\n  templheroicons\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://pkg.go.dev/github.com/indaco/templheroicons/\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://pkg.go.dev/badge/github.com/indaco/templheroicons/.svg\" alt=\"go reference\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://goreportcard.com/report/github.com/indaco/templheroicons\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://goreportcard.com/badge/github.com/indaco/templheroicons\" alt=\"go report card\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://coveralls.io/github/indaco/templheroicons?branch=main\"\u003e\n        \u003cimg\n            src=\"https://coveralls.io/repos/github/indaco/templheroicons/badge.svg?branch=main\"\n            alt=\"Coverage Status\"\n        /\u003e\n    \u003c/a\u003e\n     \u0026nbsp;\n     \u003ca href=\"https://github.com/indaco/templheroicons/blob/main/LICENSE\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/license-mit-blue?style=flat-square\u0026logo=none\" alt=\"license\" /\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.jetify.com/devbox/docs/contributor-quickstart/\"\u003e\n      \u003cimg\n          src=\"https://www.jetify.com/img/devbox/shield_moon.svg\"\n          alt=\"Built with Devbox\"\n      /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nThis package provides the [heroicons](https://heroicons.com) set (_v2.2.0_) as reusable, type-safe go [templ](https://github.com/a-h/templ) components.\n\nThe icons dataset is dynamically fetched from the [Iconify](https://github.com/iconify/icon-sets) repository.\n\n## Features\n\n- **Lazy Loading**: Icons are loaded on demand at runtime, reducing memory usage and improving performance.\n- **Customizable**: Easily adjust size, color, and add attributes with a simple, chainable API.\n- **Memory Efficient**: Avoids preloading large datasets, reducing memory overhead.\n- **Local Caching**: Speeds up icon with efficient local caching.\n\n## Installation\n\nInstall the package using `go get`:\n\n```bash\ngo get github.com/indaco/templheroicons@latest\n```\n\n## Icon Naming Convention\n\nWe categorize Heroicons based on their style (_Outline_, _Solid_) and size (`24px`, `20px`, `16px`). This is reflected in the naming convention for the components:\n\n**1. Outline Icons**\n\n- Default style with a size of _24px_.\n- Example: `heroicons.Moon`, `heroicons.Map`.\n\n**2. Solid Icons**\n\n- Style is explicitly \"solid\" with a size of _24px_.\n- Example: `heroicons.MoonSolid`, `heroicons.MapSolid`.\n\n**3. Mini Icons**\n\n- Solid style with a size of _20px_.\n- Example: `heroicons.MoonMini`, `heroicons.MapMini`.\n\n**4. Micro Icons**\n\n- Solid style with a size of _16px_.\n- Example: `heroicons.MoonMicro`, `heroicons.MapMicro`.\n\nIcons are named in _PascalCase_ for consistency and ease of use. Size and style are embedded in the names to differentiate icons visually and programmatically.\n\n## Usage\n\n### Rendering Icons\n\nTo use the icons in your templ project, call the `Render()` method on the desired icon component:\n\n```templ\npackage pages\n\nimport heroicons \"github.com/indaco/templheroicons\"\n\ntempl DemoPage() {\n    @heroicons.Moon.Render()            // Outline 24px\n    @heroicons.MinusSmallSolid.Render() // Solid 24px\n    @heroicons.MapMicro.Render()        // Micro 16px\n}\n```\n\n### Customizing Icons\n\nThe `Config` builder pattern allows for fluent and efficient customization of icons. Chain multiple methods to configure properties like size, color, and attributes, then call Render() to generate the final icon as a templ component.\n\n#### 1. SetSize()\n\nUse the `SetSize()` method to set a custom size for the icon in pixels:\n\n```templ\npackage pages\n\nimport heroicons \"github.com/indaco/templheroicons\"\n\ntempl CustomSizePage() {\n    // Set custom size\n    @heroicons.Moon.Config().SetSize(32).Render()\n}\n```\n\n#### 2. SetColor()\n\nUse the `SetColor()` method to modify the fill color for the icons:\n\n```templ\npackage pages\n\nimport heroicons \"github.com/indaco/templheroicons\"\n\ntempl CustomFillColor() {\n    // Customize fill color\n   @heroicons.Moon.Config().SetColor(\"#0000FF\").Render()\n}\n```\n\n#### 3. SetAttrs()\n\nYou can also use the `SetAttrs()` method to add custom attributes to the icons, such as _aria-hidden_, _focusable_, or custom CSS classes:\n\n```templ\npackage pages\n\nimport heroicons \"github.com/indaco/templheroicons\"\n\ntempl CustomIconPage() {\n    // Add attributes to an icon\n    @heroicons.Moon.Config().\n        SetAttrs(templ.Attributes{\n            \"aria-hidden\": \"true\",\n            \"class\":       \"custom-icon\",\n        }).\n        Render()\n}\n```\n\n## Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request.\n\n### Development Environment Setup\n\nTo set up a development environment for this repository, you can use [devbox](https://www.jetify.com/devbox) along with the provided `devbox.json` configuration file.\n\n1. Install devbox by following the instructions in the [devbox documentation](https://www.jetify.com/devbox/docs/installing_devbox/).\n2. Clone this repository to your local machine.\n3. Navigate to the root directory of the cloned repository.\n4. Run `devbox install` to install all packages mentioned in the `devbox.json` file.\n5. Run `devbox shell --pure` to start a new shell with access to the environment.\n6. Once the devbox environment is set up, you can start developing, testing, and contributing to the repository.\n\n### Running Tasks\n\nThis project provides both a `Makefile` and a `Taskfile` for running various tasks. You can use either `make` or `task` to execute the tasks, depending on your preference.\n\nTo view all available tasks, run:\n\n- **Makefile**: `make help`\n- **Taskfile**: `task --list-all`\n\nAvailable tasks:\n\n```bash\nbuild                   # Generate the Go icon definitions based on parsed data/heroicons_cache.json file.\ndemo:                   # Run the demo server.\ntest                    # Run go tests.\ntest/coverage:          # Run go tests and use go tool cover.\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findaco%2Ftemplheroicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findaco%2Ftemplheroicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findaco%2Ftemplheroicons/lists"}