Skip to main content

Adding file icons to Expressive Code frames

All of the code blocks on this site use Expressive Code and my file icons plugin. I’m using Astro so that’s what the setup will show, but you should be able to use this anywhere Expressive Code runs. If you have any problems settings this up or using it open an issue on GitHub.

Installing

Install with your favorite package manager:

Terminal window
npm i @xt0rted/expressive-code-file-icons

Then add the plugin to your config like so:

astro.config.ts
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,
      },
    }),
  ],
});
See the markdown for the above code block 
```diff lang="javascript" title="astro.config.ts" icon="astroconfig"
+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,
       },
     }),
   ],
 });
```

By default there are no styles applied. You can use iconClass and titleClass to style the icon and title as needed. In the above example Tailwind CSS classes are being used. A future version might include out of the box defaults, but for now it’s up to the user to style each element based on their needs.

Using the file icons plugin

There are currently two props you can pass in which are icon and no-icon.

Default icons and how they’re selected

If the frame’s title is a file name then it’s extension will be used to look up the icon. In some cases the full name will also be used, such as config files like tailwind.config.js which will show the Tailwind icon instead of the JavaScript icon.

Markdown

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

Rendered

index.js
export default {
  // ...
};
tailwind.config.js
export default {
  // ...
};

When an icon can’t be found from the frame’s title then the language identifier in your code block’s opening fence is used to look one up.

Markdown

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

Rendered

sample code
export default {
  // ...
};

Customizing the icon

If you want to force a specific icon you can also do that using the icon prop. This is useful when you want to force a more accurate icon such as when your CSS is more accurately represented with a PostCSS icon.

Markdown

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

Rendered

site.css
.flex {
  display: flex;
}

Stopping an icon from showing

Adding no-icon to a code block will prevent an icon from being added.

Markdown

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

Rendered

site.css
.flex {
  display: flex;
}

Terminal frames

Currently icons can’t be added to terminal frames.

Markdown

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

Rendered

Test script
npm i @xt0rted/expressive-code-file-icons

Tagged