{"id":24491250,"url":"https://github.com/jensdll/tailwindcss-plugin-icons","last_synced_at":"2025-10-13T10:22:11.618Z","repository":{"id":40435719,"uuid":"487651777","full_name":"JensDll/tailwindcss-plugin-icons","owner":"JensDll","description":"Tailwind CSS icons with classes","archived":false,"fork":false,"pushed_at":"2025-03-17T05:42:05.000Z","size":1106,"stargazers_count":25,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T14:21:41.637Z","etag":null,"topics":["icons","tailwind","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/JensDll.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":"2022-05-01T22:00:31.000Z","updated_at":"2024-10-28T07:39:29.000Z","dependencies_parsed_at":"2023-09-29T18:38:06.153Z","dependency_job_id":"0eb99f93-8acf-4da3-b0fa-81ba8af14c4f","html_url":"https://github.com/JensDll/tailwindcss-plugin-icons","commit_stats":{"total_commits":153,"total_committers":1,"mean_commits":153.0,"dds":0.0,"last_synced_commit":"57d3b3f5797b44d51d9a4b6c4e259a5e680b31a7"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":"JensDll/npm-package","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JensDll%2Ftailwindcss-plugin-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JensDll%2Ftailwindcss-plugin-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JensDll%2Ftailwindcss-plugin-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JensDll%2Ftailwindcss-plugin-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JensDll","download_url":"https://codeload.github.com/JensDll/tailwindcss-plugin-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799999,"owners_count":21163404,"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","tailwind","tailwindcss","tailwindcss-plugin"],"created_at":"2025-01-21T18:17:23.693Z","updated_at":"2025-10-13T10:22:11.514Z","avatar_url":"https://github.com/JensDll.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss-plugin-icons\n\n[![npm](https://img.shields.io/npm/v/tailwindcss-plugin-icons)](https://www.npmjs.com/package/tailwindcss-plugin-icons)\n[![socket_security](https://socket.dev/api/badge/npm/package/tailwindcss-plugin-icons)](https://socket.dev/npm/package/tailwindcss-plugin-icons)\n[![license](https://img.shields.io/npm/l/tailwindcss-plugin-icons?color=lightgrey)](https://github.com/JensDll/tailwindcss-plugin-icons/blob/main/LICENSE)\n\n[Tailwind CSS](https://tailwindcss.com/docs/installation) implementation of [@unocss/preset-icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons/).\nSee comprehensive example at [playground/vue](playground/vue/tailwind.config.ts).\n\n```bash\nnpm install tailwindcss-plugin-icons\n```\n\n```bash\npnpm add tailwindcss-plugin-icons\n```\n\n```bash\nyarn add tailwindcss-plugin-icons\n```\n\n## How to Use\n\n1. Search the available icon sets at [Icônes](https://icones.js.org/collection/all?s=) or [Iconify](https://icon-sets.iconify.design/) and choose the icons your project needs.\n2. Install any required icon set with `npm install @iconify-json/[the-icon-set-name]`.\n3. Configure the plugin in your `tailwind.config` file, for example, [heroicons](https://heroicons.com/):\n\n   ```ts\n   import type { Config } from 'tailwindcss'\n   import { Icons, type Options } from 'tailwindcss-plugin-icons'\n\n   const options: Options = ({ theme }) =\u003e ({\n     heroicons: {\n       icons: {\n         'plus-circle': {\n           cursor: 'pointer',\n           color: theme('colors.emerald.600'),\n           '\u0026:hover': {\n             color: theme('colors.emerald.800'),\n           },\n         },\n         'trash?bg': {},\n       },\n       includeAll: true,\n       scale: iconName =\u003e (iconName.endsWith('-20-solid') ? 1.25 : 1.5),\n       location: 'https://esm.sh/@iconify-json/heroicons@1.1.9/icons.json',\n     },\n   })\n\n   export default {\n     plugins: [Icons(options)],\n   } as Config\n   ```\n\n   The plugin's `options` are a function. It gets forwarded the [Tailwind CSS plugin API](https://tailwindcss.com/docs/plugins) and returns the selected icons with optional default style and scale. After the icon's name, you can pass `?bg` or `?mask` to force a specific render method. Finally, you can use `includeAll: true` to have every icon in the icon set added as a Tailwind source.\n\n4. Write icons with Tailwind CSS classes directly in your markup:\n\n   ```html\n   \u003cdiv class=\"i-heroicons-plus-circle\"\u003e\u003c/div\u003e\n   \u003cdiv class=\"bg-heroicons-trash-black\"\u003e\u003c/div\u003e\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjensdll%2Ftailwindcss-plugin-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjensdll%2Ftailwindcss-plugin-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjensdll%2Ftailwindcss-plugin-icons/lists"}