@xt0rted/expressive-code-file-icons

Add Visual Studio Code file icons to your Expressive Code frames. See my blog post showing how this works with various code blocks.

npm install @xt0rted/expressive-code-file-icons

Using with Astro.

+import { pluginFileIcons } from "@xt0rted/expressive-code-file-icons";

 export default defineConfig({
   integrations: [
     astroExpressiveCode({
       plugins: [
+        pluginFileIcons({
+          iconClass: "size-4",
+          titleClass: "flex items-center gap-1",
+        }),
       ],
       frames: {
         extractFileNameFromCode: true,
       },
     }),
   ],
 });

Frames with titles

Default icons

The file name in the title prop is used to determine the icon. If an icon can't be found based on the title then the language of the code block will be used.

Input

```css title="site.css"
.flex {
  display: flex;
}
```

```js title="sample code"
export default {
  // ...
};
```

```js title="tailwind.config.js"
export default {
  // ...
};
```

Output

Specifying and overriding an icon

If 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.

Input

```css title="site.css" icon="postcss"
.flex {
  display: flex;
}
```

Output

No icons

Icons can be removed from a frame by adding the no-icon prop to the code block.

Input

```css title="site.css" no-icon
.flex {
  display: flex;
}
```

Output

Frames without title

An icon will not be added to a frame if it doesn't have a title.

Terminal frames

Terminal frames don't have icons.

Input

```console title="Test script" icon="powershell"
npm install @xt0rted/expressive-code-file-icons
```

Output

Supported icons

See iconNames.ts for all supported icons.

This plugin uses the icons from vscode-icons and will be kept current as best as possible. If there's an issue with an icon, or one is missing, open an issue about it.