{"id":13457540,"url":"https://github.com/egoist/tailwindcss-icons","last_synced_at":"2025-04-13T22:30:30.406Z","repository":{"id":66111025,"uuid":"602407347","full_name":"egoist/tailwindcss-icons","owner":"egoist","description":"Use any icon (100,000+) from Iconify, for TailwindCSS","archived":false,"fork":false,"pushed_at":"2025-01-24T14:08:30.000Z","size":177,"stargazers_count":980,"open_issues_count":11,"forks_count":19,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-06T20:03:18.862Z","etag":null,"topics":[],"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/egoist.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},"funding":{"github":"egoist"}},"created_at":"2023-02-16T06:19:34.000Z","updated_at":"2025-04-04T16:57:23.000Z","dependencies_parsed_at":"2023-10-02T03:22:32.705Z","dependency_job_id":"e551db85-83d5-44af-8eee-276df2693a96","html_url":"https://github.com/egoist/tailwindcss-icons","commit_stats":{"total_commits":56,"total_committers":8,"mean_commits":7.0,"dds":0.4107142857142857,"last_synced_commit":"c11c54f83f220e3435cfbe8fea4adb54d030dbbe"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":"egoist/ts-lib-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Ftailwindcss-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Ftailwindcss-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Ftailwindcss-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/egoist%2Ftailwindcss-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/egoist","download_url":"https://codeload.github.com/egoist/tailwindcss-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248790533,"owners_count":21162031,"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":[],"created_at":"2024-07-31T09:00:29.271Z","updated_at":"2025-04-13T22:30:29.970Z","avatar_url":"https://github.com/egoist.png","language":"TypeScript","funding_links":["https://github.com/sponsors/egoist","https://github.com/sponsors/egoist)."],"categories":["TypeScript"],"sub_categories":[],"readme":"**💛 You can help the author become a full-time open-source maintainer by [sponsoring him on GitHub](https://github.com/sponsors/egoist).**\n\n---\n\n# @egoist/tailwindcss-icons\n\n\u003e Use any icon from [Iconify](https://iconify.design/)\n\n[![npm version](https://badgen.net/npm/v/@egoist/tailwindcss-icons)](https://npm.im/@egoist/tailwindcss-icons) [![npm downloads](https://badgen.net/npm/dm/@egoist/tailwindcss-icons)](https://npm.im/@egoist/tailwindcss-icons)\n\n\u003cimg src=\"https://user-images.githubusercontent.com/8784712/219618866-e5632d23-b948-4fa1-b3d6-00581a704bca.png\" alt=\"preview\" width=\"700\" /\u003e\n\n## Install\n\n```bash\nnpm i @egoist/tailwindcss-icons -D\n```\n\n## Usage\n\nWith TailwindCSS v4 css config:\n\n```css\n@plugin '@egoist/tailwindcss-icons';\n\n/* pass options to the plugin */\n@plugin '@egoist/tailwindcss-icons' {\n  scale: 1.5;\n}\n```\n\nWith js config:\n\n```css\n@config \"path/to/your/tailwind.config.ts\";\n```\n\nIn your `tailwind.config.js`:\n\n```js\nconst { iconsPlugin, getIconCollections } = require(\"@egoist/tailwindcss-icons\")\n\nmodule.exports = {\n  plugins: [\n    iconsPlugin({\n      // Select the icon collections you want to use\n      // You can also ignore this option to automatically discover all individual icon packages you have installed\n      // If you install @iconify/json, you should explicitly specify the collections you want to use, like this:\n      collections: getIconCollections([\"mdi\", \"lucide\"]),\n      // If you want to use all icons from @iconify/json, you can do this:\n      // collections: getIconCollections(\"all\"),\n      // and the more recommended way is to use `dynamicIconsPlugin`, see below.\n    }),\n  ],\n}\n```\n\nYou also need to install `@iconify/json` (full icon collections, 50MB) or `@iconify-json/{collection_name}` (individual icon package):\n\n```bash\n# install every icon:\nnpm i @iconify/json -D\n\n# or install individual packages like this:\nnpm i @iconify-json/mdi @iconify-json/lucide -D\n```\n\nThen you can use the icons in your HTML:\n\n```html\n\u003c!-- pattern: i-{collection_name}-{icon_name} --\u003e\n\u003cspan class=\"i-mdi-home\"\u003e\u003c/span\u003e\n```\n\nSearch the icon you want to use here: https://icones.js.org\n\n\u003e [!TIP]\n\u003e To get the full list of icon names as typescript type, you can refer to [this issue](https://github.com/egoist/tailwindcss-icons/issues/18#issuecomment-1987191833).\n\n### Plugin Options\n\n| Option               | Type                              | Default     | Description                                              |\n| -------------------- | --------------------------------- | ----------- | -------------------------------------------------------- |\n| prefix               | string                            | `i`         | Class prefix for matching icon rules                     |\n| scale                | number                            | `1`         | Scale relative to the current font size                  |\n| strokeWidth          | number                            | `undefined` | Stroke width for icons (this may not work for all icons) |\n| extraProperties      | Record\u003cstring, string\u003e            | `{}`        | Extra CSS properties applied to the generated CSS.       |\n| collectionNamesAlias | [key in CollectionNames]?: string | `{}`        | Alias to customize collection names.                     |\n\n### Custom Icons\n\nYou can also use custom icons with this plugin, for example:\n\n```js\nmodule.exports = {\n  plugins: [\n    iconsPlugin({\n      collections: {\n        foo: {\n          icons: {\n            \"arrow-left\": {\n              // svg body\n              body: '\u003cpath d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"/\u003e',\n              // svg width and height, optional\n              width: 24,\n              height: 24,\n            },\n          },\n        },\n      },\n    }),\n  ],\n}\n```\n\nThen you can use this custom icon as class name: `i-foo-arrow-left`.\n\n\u003e [!TIP]\n\u003e To read custom icons from directory, you can refer to [Load svgs from filesystem](https://github.com/egoist/tailwindcss-icons/issues/37)\n\n### Generate Icon Dynamically\n\nThe idea is from [@iconify/tailwind](https://iconify.design/docs/usage/css/tailwind),\nthanks to the author of Iconify for the great work!\n\nIf you want to install `@iconify/json` and use whatever icon you want,\nyou should add another plugin to your `tailwind.config.js`.\n\nThis is because we can not provide autocomplete for all icons from `@iconify/json`,\nit will make your editor slow.\n\n```js\nconst { iconsPlugin, dynamicIconsPlugin } = require(\"@egoist/tailwindcss-icons\")\n\nmodule.exports = {\n  plugins: [iconsPlugin(), dynamicIconsPlugin()],\n}\n```\n\nThen you can use icons dynamically like `\u003cspan class=\"i-[mdi-light--home]\"\u003e\u003c/span\u003e`.\n\n## Sponsors\n\n[![sponsors](https://sponsors-images.egoist.dev/sponsors.svg)](https://github.com/sponsors/egoist)\n\n## License\n\nMIT \u0026copy; [EGOIST](https://github.com/sponsors/egoist)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Ftailwindcss-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fegoist%2Ftailwindcss-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fegoist%2Ftailwindcss-icons/lists"}