{"id":25349441,"url":"https://github.com/gitfoxcode/nuxt-icons","last_synced_at":"2025-04-04T07:07:16.436Z","repository":{"id":37248042,"uuid":"478015600","full_name":"gitFoxCode/nuxt-icons","owner":"gitFoxCode","description":"Module for Nuxt allowing pleasant use of svg icons","archived":false,"fork":false,"pushed_at":"2024-08-05T15:38:42.000Z","size":215,"stargazers_count":194,"open_issues_count":20,"forks_count":25,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-04T07:07:13.227Z","etag":null,"topics":["icons","module","nuxt","nuxt3","svg"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gitFoxCode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-04-05T07:14:45.000Z","updated_at":"2025-01-27T09:07:21.000Z","dependencies_parsed_at":"2024-04-03T13:39:50.843Z","dependency_job_id":"492e5afc-630e-4e4f-9bda-6a26520128f7","html_url":"https://github.com/gitFoxCode/nuxt-icons","commit_stats":{"total_commits":29,"total_committers":5,"mean_commits":5.8,"dds":"0.24137931034482762","last_synced_commit":"89e53649e5868c31fc97869918ede96504ae1a04"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitFoxCode%2Fnuxt-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitFoxCode%2Fnuxt-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitFoxCode%2Fnuxt-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitFoxCode%2Fnuxt-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitFoxCode","download_url":"https://codeload.github.com/gitFoxCode/nuxt-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135144,"owners_count":20889421,"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":["icons","module","nuxt","nuxt3","svg"],"created_at":"2025-02-14T16:36:55.974Z","updated_at":"2025-04-04T07:07:16.415Z","avatar_url":"https://github.com/gitFoxCode.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![nuxt-icons](https://i.imgur.com/67g6UGS.png \"nuxt-icons banner\")](https://github.com/gitFoxCode/nuxt-icons)\n# Nuxt Icons\nA module for Nuxt 3 that allows you to use your own SVG icons quickly and enjoyably. \n\n[![playground-usage](https://i.imgur.com/SMXXpVu.png \"example of using icons in project\")](https://github.com/gitFoxCode/nuxt-icons)\n\n## Installation \n1. `npx nuxi@latest module add icons\n2. add `nuxt-icons` to modules, **nuxt.config.ts**:\n```javascript\nexport default defineNuxtConfig({\n    modules: ['nuxt-icons']\n})\n```\n\n## Usage\n1. Create a `icons` folder in `assets`: `assets/icons`\n2. Drop your icons with the **.svg** extension into the `icons` folder\n3. In the project, use `\u003cnuxt-icon name=\"\"\u003e`, where name is the name of your svg icon from the folder\n\nIf you need to use the original color from the svg file (for example, if your icon has defs) you need to use the **filled** attribute: \u003cbr\u003e\n`\u003cnuxt-icon name=\"mySuperIcon\" filled /\u003e`\n\n### Subfolders\nIf you would like to use some more complicated folder arrangement you will have to use paths from /icons\n\nIf you have a svg icon in nested directories such as:\n```\n📁icons\n  └📁admin\n  ⠀⠀└ badge.svg\n  └📁user\n  ⠀⠀└ badge.svg\n```\nthen the icons's name will be based on its own path directory and filename. Therefore, the icon's name will be:\n```html\n\u003cnuxt-icon name=\"admin/badge\"\u003e and \u003cnuxt-icon name=\"user/badge\"\u003e\n```\n## I don't like the basic styles that are assigned to the icons!\nThe styles that have been created for the icons look as follows: \n```css\nwidth: 1em;\nheight: 1em;\nmargin-bottom: 0.125em;\nvertical-align: middle;\n```\nYou can easily change these styles using regular CSS for example in your index.vue file:\n```vue\n\u003cstyle\u003e\n.nuxt-icon svg{\n  margin-bottom: 0;\n}\n\u003c/style\u003e\n```\n## I would like to use icons from an icon pack available online \nYou can download icons in SVG format and put them in the `/icons` folder, or use another module that supports this natively:  [nuxt-icon](https://github.com/nuxt-modules/icon)\n\n## What this module does\nThe module retrieves all svg files from the assets/icons folder, overwrites the height and width from them to make them scalable, and using the `\u003cnuxt-icon\u003e` component allows them to be used. `\u003cnuxt-icon\u003e` injects the SVG code directly into `\u003cspan\u003e`. \n\n## Features\n- Easy SVG icon management ✅\n- HMR (You don't have to reset the project to reload the icons) ✅\n- Ability to manipulate icons just like fonts, e.g. using `color`, `font-size` instead of `fill`,`width`,`height` ✅\n- Ability to use the original color scheme for complex icons using the `filled` attribute ✅\n- Icon only loads if used ✅\n\n## Development\n\n- Run `npm run dev:prepare` to generate type stubs.\n- Use `npm run dev` to start [playground](./playground) in development mode.\n\n\u003cbr\u003e\n\n## Thoughts and ToDo's:\n- Automatic svg file optimization \n- Automatic icon scaling that have non-square dimensions to maintain their proportions (maybe with preserveAspectRatio)\n- \u003cdel\u003eUsable for previous nuxt versions\u003c/del\u003e (just use [something like this](https://github.com/gitFoxCode/TaleGalaxy/blob/main/client/src/components/SvgIcon.vue))\n- If a lot of the same icons are used on the page create a separate svg sprite (significant improvement in performance)\n\nA big thank you to [@Diizzayy](https://github.com/Diizzayy) for his invaluable help in developing the project \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitfoxcode%2Fnuxt-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitfoxcode%2Fnuxt-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitfoxcode%2Fnuxt-icons/lists"}