{"id":25373905,"url":"https://github.com/xt0rted/expressive-code-file-icons","last_synced_at":"2025-04-09T09:15:44.994Z","repository":{"id":277478234,"uuid":"932547724","full_name":"xt0rted/expressive-code-file-icons","owner":"xt0rted","description":"Add Visual Studio Code file icons to Expressive Code frames","archived":false,"fork":false,"pushed_at":"2025-04-02T17:08:12.000Z","size":1659,"stargazers_count":5,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T18:22:44.699Z","etag":null,"topics":["astro","expressive-code","file-icons","rehype","remark"],"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/xt0rted.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"xt0rted","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null}},"created_at":"2025-02-14T04:56:24.000Z","updated_at":"2025-04-02T17:08:14.000Z","dependencies_parsed_at":"2025-03-01T21:22:48.429Z","dependency_job_id":"98bcefd5-9f81-46a0-885a-47a4655d7fca","html_url":"https://github.com/xt0rted/expressive-code-file-icons","commit_stats":null,"previous_names":["xt0rted/expressive-code-file-icons"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xt0rted%2Fexpressive-code-file-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xt0rted%2Fexpressive-code-file-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xt0rted%2Fexpressive-code-file-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xt0rted%2Fexpressive-code-file-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xt0rted","download_url":"https://codeload.github.com/xt0rted/expressive-code-file-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008628,"owners_count":21032556,"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":["astro","expressive-code","file-icons","rehype","remark"],"created_at":"2025-02-15T03:19:42.252Z","updated_at":"2025-04-09T09:15:44.989Z","avatar_url":"https://github.com/xt0rted.png","language":"TypeScript","funding_links":["https://github.com/sponsors/xt0rted"],"categories":[],"sub_categories":[],"readme":"# @xt0rted/expressive-code-file-icons\n\n[![CI](https://github.com/xt0rted/expressive-code-file-icons/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/xt0rted/expressive-code-file-icons/actions/workflows/ci.yml)\n[![npm](https://img.shields.io/npm/v/@xt0rted/expressive-code-file-icons?logo=npm)](https://www.npmjs.com/package/@xt0rted/expressive-code-file-icons)\n[![GitHub Package Registry](https://img.shields.io/badge/github-package_registry-yellow?logo=npm)](https://github.com/xt0rted/expressive-code-file-icons/pkgs/npm/expressive-code-file-icons)\n\nAdd Visual Studio Code file icons to your [Expressive Code](https://expressive-code.com/) frames.\nSee [my blog post](https://hackingonhacks.com/blog/2025/02/13/adding-file-icons-to-expressive-code-frames) showing how this works with various code blocks.\n\n```console\nnpm install @xt0rted/expressive-code-file-icons\n```\n\nUsing with [Astro](https://astro.build/).\n\n```diff\n+import { pluginFileIcons } from \"@xt0rted/expressive-code-file-icons\";\n\n export default defineConfig({\n   integrations: [\n     astroExpressiveCode({\n       plugins: [\n+        pluginFileIcons({\n+          iconClass: \"size-4\",\n+          titleClass: \"flex items-center gap-1\",\n+        }),\n       ],\n       frames: {\n         extractFileNameFromCode: true,\n       },\n     }),\n   ],\n });\n```\n\n## Frames with titles\n\n### Default icons\n\nThe file name in the `title` prop is used to determine the icon.\nIf an icon can't be found based on the title then the language of the code block will be used.\n\n#### Input\n\n````md\n```css title=\"site.css\"\n.flex {\n  display: flex;\n}\n```\n````\n\n````md\n```js title=\"sample code\"\nexport default {\n  // ...\n};\n```\n````\n\n````md\n```js title=\"tailwind.config.js\"\nexport default {\n  // ...\n};\n```\n````\n\n#### Output\n\n\u003cimg src=\"docs/images/fileextension-icon.png\" width=\"468\" alt=\"Frame with an icon based on the title's file extension\"\u003e\n\n\u003cimg src=\"docs/images/language-icon.png\" width=\"468\" alt=\"Frame with an icon based on the code block's language\"\u003e\n\n\u003cimg src=\"docs/images/filename-icon.png\" width=\"468\" alt=\"Frame with an icon based on the title's file name\"\u003e\n\n### Specifying and overriding an icon\n\nIf your title doesn't have a file name, or you don't want to use the default language icon, you can specify one using the `icon` prop.\n\n#### Input\n\n````md\n```css title=\"site.css\" icon=\"postcss\"\n.flex {\n  display: flex;\n}\n```\n````\n\n#### Output\n\n\u003cimg src=\"docs/images/override-icon.png\" width=\"468\" alt=\"Frame with overridden icon that differs from the title's file extension and the code block's language\"\u003e\n\n### No icons\n\nIcons can be removed from a frame by adding the `no-icon` prop to the code block.\n\n#### Input\n\n````md\n```css title=\"site.css\" no-icon\n.flex {\n  display: flex;\n}\n```\n````\n\n#### Output\n\n\u003cimg src=\"docs/images/no-icon.png\" width=\"468\" alt=\"Frame without a file icon\"\u003e\n\n## Frames without title\n\nAn icon will not be added to a frame if it doesn't have a title.\n\n## Terminal frames\n\nTerminal frames don't have icons.\n\n#### Input\n\n````md\n```console title=\"Test script\" icon=\"powershell\"\nnpm install @xt0rted/expressive-code-file-icons\n```\n````\n\n#### Output\n\n\u003cimg src=\"docs/images/terminal.png\" width=\"468\" alt=\"Terminal without a file icon\"\u003e\n\n## Supported icons\n\nSee [iconNames.ts](src/iconNames.ts) for all supported icons.\n\nThis plugin uses the icons from [vscode-icons](https://github.com/vscode-icons/vscode-icons) and will be kept current as best as possible.\nIf there's an issue with an icon, or one is missing, open an issue about it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxt0rted%2Fexpressive-code-file-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxt0rted%2Fexpressive-code-file-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxt0rted%2Fexpressive-code-file-icons/lists"}