IconSelect

Iconify 的图标选择器

TIP

如果浏览器支持 Clipboard API (localhost 或 https)，会自动将复制的 icon 回填到输入框中

基础用法

从iconify获取:

从icones获取:

指定图标集:

本地图标集:

View Source

<script setup lang="ts">
import { ref } from 'vue'
import * as ep from '@iconify-json/ep'
import { addCollection } from '@iconify/vue'

// 添加本地图标集
addCollection(ep.icons)
const localCollections = [ep]

const icon = ref('')
</script>

<template>
  从iconify获取: <IconSelect v-model="icon" />
  <br>
  从icones获取: <IconSelect v-model="icon" source="icones" />
  <br>
  指定图标集: <IconSelect v-model="icon" collections="icon-park,icon-park-,ant-design" />
  <br>
  本地图标集: <IconSelect v-model="icon" :collections="localCollections" :width="800" />
</template>

属性

名称	说明	类型	可选值	默认值
v-model	绑定的值	String	-	-
source	图标来源网站	String	"iconify" | "icones"	"iconify"
collections	指定图标集字符串或本地图标集	String | Array	-	-
width	弹出层宽度	Number	-	800
height	弹出层高度	Number	-	400