{"id":23853874,"url":"https://github.com/jpal91/devicons-astro","last_synced_at":"2026-02-07T00:32:09.002Z","repository":{"id":270371798,"uuid":"910149456","full_name":"jpal91/devicons-astro","owner":"jpal91","description":"An astro integration for adding Devicons to your project","archived":false,"fork":false,"pushed_at":"2025-01-17T19:08:25.000Z","size":233,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-29T22:51:31.480Z","etag":null,"topics":["astro","devicon","devicons","icon","icons","ui","withastro"],"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/jpal91.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,"zenodo":null}},"created_at":"2024-12-30T16:04:05.000Z","updated_at":"2025-01-17T19:08:27.000Z","dependencies_parsed_at":"2025-04-14T02:35:36.198Z","dependency_job_id":"8c44ddde-5025-476c-a4ba-d9d0d4c50941","html_url":"https://github.com/jpal91/devicons-astro","commit_stats":null,"previous_names":["jpal91/devicons-astro"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/jpal91/devicons-astro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpal91%2Fdevicons-astro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpal91%2Fdevicons-astro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpal91%2Fdevicons-astro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpal91%2Fdevicons-astro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpal91","download_url":"https://codeload.github.com/jpal91/devicons-astro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpal91%2Fdevicons-astro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29181842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T23:15:33.022Z","status":"ssl_error","status_checked_at":"2026-02-06T23:15:09.128Z","response_time":59,"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":["astro","devicon","devicons","icon","icons","ui","withastro"],"created_at":"2025-01-02T23:34:06.333Z","updated_at":"2026-02-07T00:32:08.984Z","avatar_url":"https://github.com/jpal91.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# devicons-astro\n\n![Devicons](package/icons.jpg)\n\nA package that provides a component to use icons from the awesome [Devicons](https://devicon.dev/) collection.\n\n## Usage\n\nInstall the package.\n\n```bash\nnpm install devicons-astro\n```\n\nImport and use the `DevIcon` component into your `.astro` file.\n\n```astro\n---\nimport DevIcon from 'devicons-astro';\n---\n\n\u003cDevIcon name=\"typescript\" variant=\"original\" size={64} /\u003e\n```\n\n### Props\n\n```ts\nimport type { HTMLAttributes } from 'astro/types'\n\nconst Variants = [\n  \"original\",\n  \"plain\",\n  \"line\",\n  \"original-wordmark\",\n  \"plain-wordmark\",\n  \"line-wordmark\",\n] as const;\n\ntype ColorObject = {\n  bgLight?: string;\n  bgDark?: string;\n  minContrastDark?: number;\n  minContrastLight?: number;\n  fallbackDark?: string;\n  fallbackLight?: string;\n};\n\ninterface Props extends HTMLAttributes\u003c\"svg\"\u003e {\n    name: string;\n    variant?: (typeof Variants)[number] | Array\u003c(typeof Variants)[number]\u003e;\n    size?: string | number;\n    responsiveColors?: boolean | ColorObject\n}\n```\n\n1. Name (required) - The name of the icon to render. Will be the same as you would see it on the [Devicons website](https://devicon.dev).\nThe component will throw an error if it does not match exactly. All names are lowercase and generally do not have spaces or any other puntuation.\n(ie 'Amazon Web Services' is 'amazonwebservices').\n2. Variant (optional) - Each `Devicon` has several variants and you can use this to specify which you want (defaults to `[\"original\", \"plain\", \"line\"]`). See [Fallbacks](#fallbacks) for more details.\n3. Size (optional) - Sets width and height, defaults to 24px.\n4. Responsive Colors (optional) - See [Responsive Colors](#responsive-colors) for more details.\n5. Any other valid svg props.\n\n## Fallbacks\n\nThe component will produce an [error](#errors) whenever an invalid name or variant is passed. You can override this behavior in one of two ways:\n\n### Pass a fallback slot\n\nThe `DevIcon` component has one slot, `fallback`. Anything you put in this slot will be rendered instead of the requested icon **only if the requested icon is invalid**.\n\n```astro\n\u003cDevIcon name=\"does-not-exist\" variant=\"who-knows\"\u003e\n    \u003cimg src=\"my-fallback-img.jpg\" alt=\"picture of a cat\" width={24} height={24} slot=\"fallback\" /\u003e\n\u003c/DevIcon\u003e\n```\n\nNo errors will be thrown and the fallback image will be rendered instead.\n\n### Give multiple variant options\n\nThis will only work if the requested icon is valid, but if you pass an array of valid variants to the `variant` prop, it will check each variant passed and go to the next if that\nicon doesn't have a variant of that type. Example -\n\n```astro\n\u003cDevIcon name=\"typescript\" variant={[\"who-knows\", \"original\", \"plain\"]} /\u003e\n```\n\nIn this case since `who-knows` is not a valid variant, but `original` is, the `original` variant will be rendered.\n\n## Responsive Colors\n\n**New in v0.3**\n\nSometimes you may not know if an icon works on a particular background. You can now pass a color object (or just `true`) to the `responsiveColors` prop:\n\n```ts\ntype ColorObject = {\n  bgLight?: string; // Your app's light background color (default - #fff)\n  bgDark?: string; // Your app's dark background color (default - #000)\n  minContrastDark?: number; // Minimum contrast between dark bg and icon color (defaults to 3 based on WCAG standards - https://webaim.org/resources/contrastchecker)\n  minContrastLight?: number; // Default 3\n  fallbackDark?: string; // A specified fallback color for dark backgrounds if contrast isn't reached (default - #fff)\n  fallbackLight?: string; // Default #000\n};\n```\n\nInternally the component uses the [`colorjs.io`](https://colorjs.io) package, so you can pass any valid color string that is accepted by the `Color` class (pretty much any valid CSS color string).\n\nWhen this option is in effect, the colors will change based on the user's `prefers-color-scheme` selector.\n\n\u003e **Important Note**\n\u003e\n\u003e Most of the icon's `original` variants use multiple colors and/or textured/gradient backgrounds. Because of this, using responsive colors on these variants will most likely\n\u003e not produce the desired effect. Use the `plain` or `line` variants instead.\n\n## Design/Caching\n\nBecause of the sheer number of icons (over 2000 variants), `devicons-astro` does not include built components but instead\npulls directly from the `jsdelivr` cdn at build time to minimize package size. An svg icon is generated as a result and passed to the `DevIcon` component.\n\nWhile this is fine and efficient during build time (as the icon will only be fetched once), this does cause many queries to happen during development.\nTo minimize this impact, `devicons-astro` caches the result locally so it can be reused. When developing, you should only fetch the icon from the cdn once and reuse the\nresult from then on.\n\n## Errors\n\nSince there are many variations, `devicons-astro` attempts to provide some helpful errors to point you in the right direction when you pass invalid values:\n\n```astro\n\u003cDevIcon name=\"nothing\"\u003e\n// Devicons does not contain the icon 'nothing'. Please see https://devicon.dev for all icons\n\u003cDevIcon name=\"typescript-original\"\u003e\n// You have likely included the variant type with the name. Pass the variant to the 'variant' prop separately instead (ie name=\"typescript\" variant=\"original\")\n\u003cDevIcon name=\"python\" variant=\"line-wordmark\"\u003e\n// Devicon 'python' does not have a variant 'line-wordmark'. Valid variants: 'original, original-wordmark, plain, plain-wordmark'\n```\n\nTo avoid this behavior, see [Fallbacks](#fallbacks).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpal91%2Fdevicons-astro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpal91%2Fdevicons-astro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpal91%2Fdevicons-astro/lists"}