图标元素的艺术：按钮图标和图标选择器

前端

2023-02-03 12:16:16

图标元素的艺术：利用 Vite 和 AntDesignVue 提升 UI 设计

图标：UI 的视觉语言

在 UI 设计中，图标扮演着至关重要的角色。它们跨越语言和文化障碍，直观地传达信息并提升用户体验。它们可以指引用户，增强界面功能，并为整个设计增添视觉美感。

按钮图标和图标选择器

按钮图标通常位于按钮上，提供功能的视觉提示。例如，带有保存图标的按钮通常用于保存数据，而带有删除图标的按钮则表示删除功能。图标选择器允许用户从一组选项中选择图标，例如用作按钮图标。

使用 Vite 和 AntDesignVue 构建图标组件

Vite 是一个快速而轻量级的构建工具，AntDesignVue 则是一个用于构建 Vue 组件的 UI 库。结合使用，我们可以轻松创建按钮图标和图标选择器。

安装和配置

npm install vite antd

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Antd from 'vite-plugin-antd'

export default defineConfig({
  plugins: [
    vue(),
    Antd(),
  ],
})

创建按钮图标组件

// ButtonIcon.vue
<template>
  <a-button>
    <a-icon :icon="icon" />
    {{ label }}
  </a-button>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Icon } from 'antd'

export default defineComponent({
  name: 'ButtonIcon',
  props: {
    icon: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      required: false,
    },
  },
  setup() {
    const icon = ref('')

    return {
      icon,
    }
  },
})
</script>

创建图标选择器组件

// IconPicker.vue
<template>
  <a-popover trigger="click">
    <a-icon :icon="icon" />
    <a-popconfirm title="确定选择此图标？" on-confirm="handleConfirm">
      <a-icon :icon="icon" />
    </a-popconfirm>
  </a-popover>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { Icon, Popconfirm } from 'antd'

export default defineComponent({
  name: 'IconPicker',
  props: {
    icon: {
      type: String,
      required: true,
    },
  },
  setup() {
    const icon = ref('')

    const handleConfirm = () => {
      // do something
    }

    return {
      icon,
      handleConfirm,
    }
  },
})
</script>

自定义图标组件

AntDesignVue 允许我们通过修改主题来自定义图标组件。我们可以使用 antd-theme-generator 包来创建自己的主题。

npm install antd-theme-generator

mkdir my-theme

cd my-theme

npx antd-theme-generator init

npx antd-theme-generator start

修改主题中的图标

// my-theme/default-theme.less
@icon-url "path/to/icons";

应用主题

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Antd from 'vite-plugin-antd'
import less from 'less-plugin'

export default defineConfig({
  plugins: [
    vue(),
    Antd({
      theme: 'my-theme',
    }),
    less(),
  ],
})