Code Block Icons

Code block icons are implemented based on vitepress-plugin-group-icons. See also the built-in icons list.

Built-in Icons ​

Many common file types have built-in icon support. Simply use the [filename] syntax after the language identifier:

valaxy.config.ts
ts
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig({})
App.vue
vue
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">
    Count: {{ count }}
  </button>
</template>
package.json
json
{
  "name": "my-valaxy-blog",
  "version": "0.1.0"
}
docker-compose.yml
yaml
version: '3'
services:
  app:
    image: node:20
install.sh
bash
#!/bin/bash
pnpm install
pnpm build

Custom Icons ​

You can configure custom icons in valaxy.config.ts:

valaxy.config.ts
ts
import { defineValaxyConfig } from 'valaxy'
import { localIconLoader } from 'vitepress-plugin-group-icons'

export default defineValaxyConfig({
  groupIcons: {
    customIcon: {
      // Use a local SVG file
      valaxy: localIconLoader(import.meta.url, './public/favicon.svg'),
      // Use iconify icons
      nodejs: 'vscode-icons:file-type-node',
      playwright: 'vscode-icons:file-type-playwright',
      typedoc: 'vscode-icons:file-type-typedoc',
      eslint: 'vscode-icons:file-type-eslint',
      dockerfile: 'vscode-icons:file-type-docker',
    },
  },
})

Code Groups with Icons ​

You can also use icons inside code groups:

ts
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig({
  theme: 'yun',
})
json
{
  "dependencies": {
    "valaxy": "latest",
    "valaxy-theme-yun": "latest"
  }
}
toml
[build]
  command = "pnpm build"
  publish = "dist"

Contributors