Iconify

使用 Iconify 加载图标

在 Framework 中使用

Vue

<script setup lang="ts">
  import { Icon, addCollection, listIcons } from '@iconify/vue'
  import { icons } from '@vrx-arco/iconify-json'

  addCollection(icons)
</script>
<template>
  <Icon icon="arco-design:align-center" style="font-size:30px;color:#ff6736;" />
  <Icon icon="arco-design:align-right" style="font-size:30px;color:#ff6736;" />
</template>

React

  import { Icon, addCollection, listIcons } from '@iconify/react'
  import { icons } from '@vrx-arco/iconify-json'

  addCollection(icons)
  export const App = ()=> {
    return (
    <div>
      <Icon icon="arco-design:align-center" style="font-size:30px;color:#ff6736;" />
      <Icon icon="arco-design:align-right" style="font-size:30px;color:#ff6736;" />
    </div>
    )
  }

在 unplugin-icons 中使用

vite.config.ts

import { defineConfig } from 'vite'
import { Icons } from 'unplugin-icons/vite'
import { ExternalPackageIconLoader } from 'unplugin-icons/loaders'

export default defineConfig({
  plugins:[
      Icons({
        customCollections: {
          'arco-design': ExternalPackageIconLoader('@vrx-arco/iconify-json')['iconify-json']
        }
      })
    ]
})

Vue

<script setup lang="ts">
  import IconAlignCenter from '~icons/arco-design/align-center'
  import IconAlignRight from '~icons/arco-design/align-right'
</script>
<template>
  <IconAlignCenter style="font-size:30px;color:#ff6736;" />
  <IconAlignRight style="font-size:30px;color:#ff6736;" />
</template>

React

  import IconAlignCenter from '~icons/arco-design/align-center'
  import IconAlignRight from '~icons/arco-design/align-right'

  export const App = ()=> {
    return (
    <div>
      <IconAlignCenter style="font-size:30px;color:#ff6736;" />
      <IconAlignRight style="font-size:30px;color:#ff6736;" />
    </div>
    )
  }

在 unocss 中使用

uno.config.ts

import { defineConfig,presetIcons } from 'unocss'
import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'

export default defineConfig({
  presets: [
    presetIcons({ 
      collections: {
        'arco-design': createExternalPackageIconLoader('@vrx-arco/iconify-json')['iconify-json']
      }
     }),
    // ...other presets
  ],
})

Vue

<script setup lang="ts">
  import IconAlignCenter from '~icons/arco-design/align-center'
  import IconAlignRight from '~icons/arco-design/align-right'
</script>
<template>
  <IconAlignCenter style="font-size:30px;color:#ff6736;" />
  <IconAlignRight style="font-size:30px;color:#ff6736;" />
</template>

React

  import IconAlignCenter from '~icons/arco-design/align-center'
  import IconAlignRight from '~icons/arco-design/align-right'

  export const App = ()=> {
    return (
    <div>
      <IconAlignCenter style="font-size:30px;color:#ff6736;" />
      <IconAlignRight style="font-size:30px;color:#ff6736;" />
    </div>
    )
  }

安装

npm

$ npm i @vrx-arco/iconify-json

yarn

$ yarn add @vrx-arco/iconify-json

pnpm

$ pnpm add @vrx-arco/iconify-json

bun

$ bun add @vrx-arco/iconify-json

更多

更多用法，参照支持 Iconify 加载图标库的具体说明

参考资料

• unocss
• tailwindcss
• unplugin-icons
• ...