@christicons/vue

Vue-compatible Christicons components powered by vue-demi.

The package works with Vue 3 and Vue 2.7. For Vue 2 projects using the Composition API plugin, install @vue/composition-api as well.

Installation

Vue 3

npm install @christicons/vue

Vue 2.7 or Vue 2 + Composition API

npm install @christicons/vue @vue/composition-api

If you are on Vue 2, register the plugin once in your app entry:

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue.use(VueCompositionApi)

Dynamic icon by name

<script setup lang="ts">
import { Christicon } from '@christicons/vue'
</script>

<template>
  <Christicon name="cross" :size="24" color="#111827" title="Cross" />
</template>

Named icon imports

<script setup lang="ts">
import { CrossIcon, HeartIcon } from '@christicons/vue'
</script>

<template>
  <div style="display: flex; gap: 12px;">
    <CrossIcon :size="24" />
    <HeartIcon size="2rem" color="#dc2626" title="Heart" />
  </div>
</template>

Available props

• name?: IconName on Christicon
• size?: number | string
• color?: string
• title?: string
• class?: string
• style?: Record<string, string | number>

Metadata and icon list

import { iconNames, iconMetadata, vueIconsByName } from '@christicons/vue'

const firstIconName = iconNames[0]
const FirstIcon = vueIconsByName[firstIconName]
const firstMeta = iconMetadata[firstIconName]

Package contents

• Components compatible with Vue 2 and Vue 3
• Dynamic rendering by icon name
• Re-exported icon metadata from @christicons/core