Augma UI

Icon 图标

图标使用及其解决方案

Code 代码
<template>
  <div class="flex justify-between flex-wrap">
    <agm-button
      v-for="(item,i) in iconItems"
      :key="i"
      class="m-2"
      icon
      :color="item.color"
    >
      <agm-icon :name="item.icon" />
    </agm-button>
  </div>

  <div class="flex justify-between flex-wrap">
    <agm-button
      v-for="(item,i) in iconItems"
      :key="i"
      class="m-2"
      icon
      :color="item.color"
      plain
    >
      <agm-icon :name="item.icon" />
    </agm-button>
  </div>
  <div class="logo-demo text-center mt-5">
    <agm-icon
      name="i-mdi-do-not-disturb-off"
      color="var(--agm-color-danger)"
      size="10rem"
    />
  </div>
</template>

<script lang="ts" setup>
import { AgmButton, AgmIcon } from 'augma'
const iconItems = [
  {
    color: '',
    icon: 'i-mdi-github',
  },
  {
    color: 'blue',
    icon: 'i-mdi-vector-square',
  },
  {
    color: 'green',
    icon: 'i-mdi-check',
  },
  {
    color: 'yellow',
    icon: 'i-mdi-warning',
  },
  {
    color: 'red',
    icon: 'i-mdi-error',
  },
  {
    color: 'cyan',
    icon: 'i-mdi-information-variant',
  },
]
</script>

API

参数说明类型可选值默认值
icon图标名称（见 icones.js.org）string--
color图标颜色string-black
size图标大小string-1.5rem

你可以基于 iconify 与 unplugin-icons 来快速使用各类扩展图标

推荐方式

在 Vite 中使用

使用 unplugin-icons 将其渲染为 SVG，并按需加载图标。

unplugin-icons: 🤹 Access thousands of icons as components on-demand universally.

By the way, I like remixicon.

关于 Iconify

导入图标集

安装依赖

pnpm add -D @iconify/iconify @iconify/json

使用线上的图标 API 

// import "https://code.iconify.design/2/2.0.0-rc.6/iconify.min.js";
import "@iconify/iconify";

Without API

本地绑定图标

添加图标集 
import Iconify from "@iconify/iconify/dist/iconify.without-api.min.js";
import mdiIcons from "@iconify/json/json/mdi.json";
// import carbonIcons from "@iconify/json/json/carbon.json";
Iconify.addCollection(mdiIcons);
// Iconify.addCollection(carbonIcons);
自定义图标 Bundle