Getting Started

Installation

Prerequisites

Make sure you have the following installed:

• iconify-icon if used in the web component, see Iconify Icon Web Component for the details
• @iconify/react if used in React, see Iconify for React for the details
• @iconify/vue if used in Vue, see Iconify for Vue for the details
• @iconify/svelte if used in Svelte, see Iconify for Svelte for the details

And then install bilicon using your package manager of choice:

npm

$ npm add -S bilicon

pnpm

$ pnpm add -S bilicon

yarn

$ yarn add -S bilicon

yarn (pnp)

$ yarn add -S bilicon

bun

$ bun add -S bilicon

Usage

Congratulations! you have successfully installed bilicon. Now you can start using it in your project.

Web Component

import { biliIconifyJSON } from 'bilicon'
import { addCollection } from 'iconify-icon'

addCollection(biliIconifyJSON)

// Now you can use bilicon in your html as a web component
// <iconify-icon icon="bili:doge" />

React

import { addCollection, Icon } from '@iconify/react'
import { biliIconifyJSON } from 'bilicon'

addCollection(biliIconifyJSON)

// <Icon icon="bili:doge" />

Vue

import { addCollection, Icon } from '@iconify/vue'
import { biliIconifyJSON } from 'bilicon'

addCollection(biliIconifyJSON)

// <Icon icon="bili:doge" />

Svelte

import Icon, { addCollection } from '@iconify/svelte'
import { biliIconifyJSON } from 'bilicon'

addCollection(biliIconifyJSON)

// <Icon icon="bili:doge" />

zhihu

Web Component

import { zhihuIconifyJSON } from 'bilicon'
import { addCollection } from 'iconify-icon'

addCollection(zhihuIconifyJSON)

// Now you can use zhihu emoticon in your html as a web component
// <iconify-icon icon="zhihu:吃瓜" />

React

import { addCollection, Icon } from '@iconify/react'
import { zhihuIconifyJSON } from 'bilicon'

addCollection(zhihuIconifyJSON)

// <Icon icon="zhihu:吃瓜" />

Vue

import { addCollection, Icon } from '@iconify/vue'
import { zhihuIconifyJSON } from 'bilicon'

addCollection(zhihuIconifyJSON)

// <Icon icon="zhihu:吃瓜" />

Svelte

import Icon, { addCollection } from '@iconify/svelte'
import { zhihuIconifyJSON } from 'bilicon'

addCollection(zhihuIconifyJSON)

// <Icon icon="zhihu:吃瓜" />

douyin

Web Component

import { douyinIconifyJSON } from 'bilicon'
import { addCollection } from 'iconify-icon'

addCollection(douyinIconifyJSON)

// Now you can use zhihu emoticon in your html as a web component
// <iconify-icon icon="douyin:九转大肠" />

React

import { addCollection, Icon } from '@iconify/react'
import { douyinIconifyJSON } from 'bilicon'

addCollection(douyinIconifyJSON)

// <Icon icon="douyin:九转大肠" />

Vue

import { addCollection, Icon } from '@iconify/vue'
import { douyinIconifyJSON } from 'bilicon'

addCollection(douyinIconifyJSON)

// <Icon icon="douyin:九转大肠" />

Svelte

import Icon, { addCollection } from '@iconify/svelte'
import { douyinIconifyJSON } from 'bilicon'

addCollection(douyinIconifyJSON)

// <Icon icon="douyin:九转大肠" />

rednote

Web Component

import { rednoteIconifyJSON } from 'bilicon'
import { addCollection } from 'iconify-icon'

addCollection(rednoteIconifyJSON)

// Now you can use zhihu emoticon in your html as a web component
// <iconify-icon icon="rednote:doge" />

React

import { addCollection, Icon } from '@iconify/react'
import { rednoteIconifyJSON } from 'bilicon'

addCollection(rednoteIconifyJSON)

// <Icon icon="rednote:doge" />

Vue

import { addCollection, Icon } from '@iconify/vue'
import { rednoteIconifyJSON } from 'bilicon'

addCollection(rednoteIconifyJSON)

// <Icon icon="rednote:doge" />

Svelte

import Icon, { addCollection } from '@iconify/svelte'
import { rednoteIconifyJSON } from 'bilicon'

addCollection(rednoteIconifyJSON)

// <Icon icon="rednote:doge" />