{"id":36372118,"url":"https://github.com/viewi/icons","last_synced_at":"2026-01-11T14:01:51.883Z","repository":{"id":270193808,"uuid":"909604688","full_name":"viewi/icons","owner":"viewi","description":"SVG icons package for Viewi","archived":false,"fork":false,"pushed_at":"2025-05-15T13:46:49.000Z","size":232,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-29T11:50:11.171Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","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/viewi.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-29T08:14:27.000Z","updated_at":"2025-05-15T13:46:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"03dcf133-5657-4182-a7bd-517533090750","html_url":"https://github.com/viewi/icons","commit_stats":null,"previous_names":["viewi/icons"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/viewi/icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewi%2Ficons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewi%2Ficons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewi%2Ficons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewi%2Ficons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/viewi","download_url":"https://codeload.github.com/viewi/icons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/viewi%2Ficons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28306985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-11T11:18:18.743Z","status":"ssl_error","status_checked_at":"2026-01-11T11:07:56.842Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-01-11T14:01:38.704Z","updated_at":"2026-01-11T14:01:51.861Z","avatar_url":"https://github.com/viewi.png","language":"PHP","funding_links":["https://www.buymeacoffee.com/ivan.v"],"categories":[],"sub_categories":[],"readme":"# Viewi Icons package\n\n## SVG Sprites:\n\n- Has bootstrap icons on board [https://icons.getbootstrap.com/](https://icons.getbootstrap.com/)\n\nAppend prefix `bi-` to use the icon. It is necessary in order to avoid conflicts with future icon sprites.\n\nFor example, for icon `emoji-sunglasses` use `bi-emoji-sunglasses`: `\u003cIcon name=\"bi-emoji-sunglasses\" /\u003e`\n\n## SVG sprite vs. Font icons\n\nAn SVG sprite renders directly into the page (or can be accessed as an asset with a URL). Then, you can use the icon from that sprite.\nSprite includes only those icons that you really want to use.\n\nFont icons require you to include links to the font and css, which have all the icons altogether, even if you are not using most of them.\n\n## How to use\n\n`composer require viewi/icons`\n\nIn your Viewi config:\n\nAdd `use Viewi\\Icons\\ViewiIcons;`\n\nUse the package `-\u003euse(ViewiIcons::class)`;\n\n```php\n\n\u003c?php\n\nuse Viewi\\AppConfig;\nuse Viewi\\Icons\\ViewiIcons;\n\n// ...\n\n$viewiConfig = (new AppConfig('my-app'))\n    -\u003euse(ViewiIcons::class)\n    \n// ...\n\nreturn $viewiConfig;\n```\n\nAdd sprite component `IconsSprite` at the beginning of the `body` tag in your layout component, for example:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\" data-bs-theme=\"{ $darkMode-\u003edark ? 'dark' : 'light' }\"\u003e\n\n\u003chead\u003e\n    \u003ctitle\u003e\n        $title | {t('layout.title')}\n    \u003c/title\u003e\n    ...\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cIconsSprite /\u003e\n    ...\n    \u003cViewiAssets /\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n`IconsSprite` renders the sprite (or SVG map) with icons that you use. \n\nPackage will analyze your source code and include only those icons that you really use.\n\nFor example, if you use `emoji-sunglasses` icon only, it will render something like this:\n\n```html\n\u003cdiv style=\"display: none;\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\u003e\n        \u003csymbol class=\"bi bi-emoji-sunglasses\" viewBox=\"0 0 16 16\" id=\"bi-emoji-sunglasses\"\u003e\n            \u003cpath d=\"M4.968 9.75a.5.5 0 1 0-.866.5A4.5 4.5 0 0 0 8 12.5a4.5 4.5 0 0 0 3.898-2.25.5.5 0 1 0-.866-.5A3.5 3.5 0 0 1 8 11.5a3.5 3.5 0 0 1-3.032-1.75M7 5.116V5a1 1 0 0 0-1-1H3.28a1 1 0 0 0-.97 1.243l.311 1.242A2 2 0 0 0 4.561 8H5a2 2 0 0 0 1.994-1.839A3 3 0 0 1 8 6c.393 0 .74.064 1.006.161A2 2 0 0 0 11 8h.438a2 2 0 0 0 1.94-1.515l.311-1.242A1 1 0 0 0 12.72 4H10a1 1 0 0 0-1 1v.116A4.2 4.2 0 0 0 8 5c-.35 0-.69.04-1 .116\"\u003e\u003c/path\u003e\n            \u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0\"\u003e\u003c/path\u003e\n        \u003c/symbol\u003e\n    \u003c/svg\u003e\n\u003c/div\u003e\n```\n\nUse the icon:\n\n```html\n\u003cIcon name=\"bi-emoji-sunglasses\" /\u003e\n```\n\nThis will render something like this:\n\n```html\n\u003csvg\u003e\n    \u003cuse xlink:href=\"#bi-emoji-sunglasses\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\nCustom class with `classList`:\n\n```html\n\u003cIcon name=\"bi-emoji-sunglasses\" classList=\"my-icon\" /\u003e\n```\n\nWill render:\n\n```html\n\u003csvg class=\"my-icon\"\u003e\n    \u003cuse xlink:href=\"#bi-emoji-sunglasses\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\nSupport\n--------\n\nWe all have full-time jobs and dedicate our free time to this project, and we would appreciate Your help of any kind. If you like what we are creating here and want us to spend more time on this, please consider supporting:\n\n - Give us a star⭐.\n - Support me on [buymeacoffee](https://www.buymeacoffee.com/ivan.v)\n - Follow us on [Twitter/X](https://x.com/viewiphp).\n - Contribute by sending pull requests.\n - Any other ideas or proposals? Please mail me contact@viewi.net.\n - Feel welcome to share this project with your friends.\n\n\nLicense\n--------\n\nCopyright (c) 2020-present Ivan Voitovych\n\nPlease see [MIT](/LICENSE) for license text","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviewi%2Ficons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviewi%2Ficons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviewi%2Ficons/lists"}