图标 Icon

基于 SvgIcon 通用组件封装，自动扫描 src/components/icons/ 目录下的全部 24×24 SVG 矢量图标。支持无损缩放与随 CSS color 自由变色，点击任意图标卡片即可复制调用代码。

常用业务调用示例

删除 16px

计算器 20px

筛选激活态（安井绿）

设置 20px

右箭头 14px

vue

<template>
  <!-- 1. 默认继承父元素文字颜色，尺寸 16px -->
  <SvgIcon name="delete"/>

  <!-- 2. 自定义尺寸与品牌主色（如筛选已激活状态） -->
  <SvgIcon :size="18" color="#41A702" name="filter"/>

  <!-- 3. 搭配 AppButton 按钮使用 -->
  <AppButton size="small" variant="soft">
    <template #icon><SvgIcon :size="14" name="calculator"/></template>
    价格计算
  </AppButton>
</template>

<script setup>
import SvgIcon from '@/components/common/SvgIcon.vue'
</script>

全部图标库（点击卡片复制代码）

大小：

<input
  v-model="keyword"
  type="text"
  class="icon-search-input"
  placeholder="搜索图标，点击可复制用法..."
/>

方向指示类图标（12）

arrow-back-outline

arrow-down

arrow-down-outline

arrow-forward-outline

arrow-left

arrow-right

arrow-up

arrow-up-outline

chevron-back-outline

chevron-down-outline

chevron-forward-outline

chevron-up-outline

功能操作类图标（6）

calculator

delete

filter

settings

TOP

底部导航栏图标（10）

cart

cart-active

API 参数说明

参数名	说明	类型	默认值
`name`	图标文件名（不含 `.svg` 后缀，如 `'delete'`、`'filter'`）	`string`	必填
`size`	图标宽高尺寸（单位 `px`）	`number \| string`	`16`
`color`	图标颜色（默认 `'currentColor'` 跟随父级文字色；传 `'none'` 保留多色原貌）	`string`	`'currentColor'`

图标 Icon ​

常用业务调用示例 ​

全部图标库（点击卡片复制代码） ​

API 参数说明 ​

图标 Icon

常用业务调用示例

全部图标库（点击卡片复制代码）

API 参数说明