https://github.com/xt0rted/expressive-code-file-icons
Add Visual Studio Code file icons to Expressive Code frames
https://github.com/xt0rted/expressive-code-file-icons
astro expressive-code file-icons rehype remark
Last synced: 27 days ago
JSON representation
Add Visual Studio Code file icons to Expressive Code frames
- Host: GitHub
- URL: https://github.com/xt0rted/expressive-code-file-icons
- Owner: xt0rted
- License: mit
- Created: 2025-02-14T04:56:24.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-04-02T17:08:12.000Z (about 1 month ago)
- Last Synced: 2025-04-02T18:22:44.699Z (about 1 month ago)
- Topics: astro, expressive-code, file-icons, rehype, remark
- Language: TypeScript
- Homepage:
- Size: 1.58 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @xt0rted/expressive-code-file-icons
[](https://github.com/xt0rted/expressive-code-file-icons/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/@xt0rted/expressive-code-file-icons)
[](https://github.com/xt0rted/expressive-code-file-icons/pkgs/npm/expressive-code-file-icons)
Add Visual Studio Code file icons to your [Expressive Code](https://expressive-code.com/) frames.
See [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.
```console
npm install @xt0rted/expressive-code-file-icons
```
Using with [Astro](https://astro.build/).
```diff
+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
````md
```css title="site.css"
.flex {
display: flex;
}
```
````
````md
```js title="sample code"
export default {
// ...
};
```
````
````md
```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
````md
```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
````md
```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
````md
```console title="Test script" icon="powershell"
npm install @xt0rted/expressive-code-file-icons
```
````
#### Output
## Supported icons
See [iconNames.ts](src/iconNames.ts) for all supported icons.
This plugin uses the icons from [vscode-icons](https://github.com/vscode-icons/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.