Installation Icon

@gdsicon/vue is maintained alongside PXD and shares its visual language; install it if you want consistent iconography.

Install

pnpm install @gdsicon/vue

There is deliberately no global registration option: it would pull every icon into the bundle.

Import on demand

<script setup>
  import AccessibilityIcon from '@gdsicon/vue/accessibility'
  // or
  // import { AccessibilityIcon } from '@gdsicon/vue'
</script>

<template>
  <AccessibilityIcon />
</template>

Import automatically

Use unplugin-vue-components to simplify the import process.

pnpm install -D unplugin-vue-components

// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import GdsiResolver from '@gdsicon/vue/resolver'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        // You can also specify other prefixes yourself,
        //  which will be used as an identification mark during automatic import.
        GdsiResolver({ prefix: 'IGds' }),
      ],
    }),
  ],
})

Icons then resolve on first use

<template>
  <IGdsAccessibility />
</template>