Icon

这是一个图标组件, 你可以通过向其传递一个svg字符串或者symbol使用。

TIP

它的原理很简单，通过以下css设置svg的初始样式。

这允许通过font-size控制svg大小

css

svg {
  width: '1em';
  height: '1em';
}

这允许通过color控制svg颜色

css

svg {
  fill: 'currentcolor'; // 所以对于多色图标颜色相关属性将无效。
}

基础用法

通过 svg 定义图标

vue

<script setup lang="ts">
const svgs = [
  '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path></svg>',
  '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M640 832a128 128 0 0 1-256 0h256zm192-64H134.4a38.4 38.4 0 0 1 0-76.8H192V448c0-154.88 110.08-284.16 256.32-313.6a64 64 0 1 1 127.36 0A320.128 320.128 0 0 1 832 448v243.2h57.6a38.4 38.4 0 0 1 0 76.8H832z"></path></svg>',
  '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path></svg>',
  '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path><path fill="currentColor" d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path></svg>',
];
</script>

<template>
  <v-space direction="column">
    <v-space wrap>
      <v-icon v-for="svg in svgs" :key="svg" :svg="svg" />
    </v-space>
  </v-space>
</template>

调整尺寸

使用 size 调整图标[大小]

图标角度

通过 rotate 定义图标角度

旋转图标

通过 spin 定义图标自动旋转

图标颜色

通过 color 定义图标颜色

图标悬停颜色

通过 hover-color 定义图标悬停颜色

多色图标

你也可以使用多色图标但是这将导致颜色相关属性无效。

vue

<script setup lang="ts">
const panda = '<svg t="1672830187767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2187" width="200" height="200"><path d="M512 512m-508 0a508 508 0 1 0 1016 0 508 508 0 1 0-1016 0Z" fill="#F3756F" p-id="2188"></path><path d="M289.2 211.2c17.2 1.6 30.4 14.8 42 27.6 14.8 16 29.6 32.4 44.4 48.4 7.2 8 15.2 17.6 12.8 28.4-1.6 6.8-6.8 11.6-12 16-42.4 37.6-86.4 73.2-132.4 106.4-16.8-15.6-28.4-36-33.6-58.4-3.6-16-3.6-32.4-3.6-48.4 0-19.6 0-40 8-57.6 4.8-10.8 12.8-20 20.4-29.2 14.4-16.4 32-35.2 54-33.2zM734.8 211.2c-17.2 1.6-30.4 14.8-42 27.6-14.8 16-29.6 32.4-44.4 48.4-7.2 8-15.2 17.6-12.8 28.4 1.6 6.8 6.8 11.6 12 16 42.4 37.6 86.4 73.2 132.4 106.4 16.8-15.6 28.4-36 33.6-58.4 3.6-16 3.6-32.4 3.6-48.4 0-19.6 0-40-8-57.6-4.8-10.8-12.8-20-20.4-29.2-14.4-16.4-32-35.2-54-33.2z" fill="#08070C" p-id="2189"></path><path d="M211.2 549.6c6.4 15.6 12.8 31.6 24 43.6 11.2 12.4 29.6 20 44.8 13.6 9.2-3.6 16.4-11.6 23.6-18.8 34.8-34 84-52 132.4-48-10 39.6-23.6 78.4-40.4 116-13.6 30-29.6 63.6-19.6 94.8 8.4 26.4 23.2 43.6 46.8 58.4 8 4.8 26.4 10 35.6 11.2 18 2 36.8-11.2 53.6-4.8 16.8-6.4 35.6 6.8 53.6 4.8 9.2-1.2 28.8-6 36.8-11.2 23.6-14.8 37.2-32 45.6-58.4 10-31.6-6-64.8-19.6-94.8-16.8-37.2-30.4-76-40.4-116 48-4 97.6 14 132.4 48 7.2 7.2 14 15.2 23.6 18.8 15.6 6 33.6-1.6 44.8-13.6 11.2-12.4 17.6-28.4 24-43.6 3.2-7.6 8.4-16 14.4-21.2-2-25.2-6-50.4-14-74.4-6.4-18.8-15.2-36.8-24.4-54.4-18.8-35.2-41.2-70-73.2-94-25.2-19.2-55.2-30.4-84.8-41.6-24.8-9.2-50.8-18.8-76.8-22.4-2.4-0.4-4.8-0.8-7.2-0.8-1.2 0-2.4-0.4-3.6-0.4h-1.2c-8.8-0.8-18.8-1.2-30-1.2-10.8 0-21.2 0.4-30 1.2h-1.2c-1.2 0-2.4 0.4-3.6 0.4-2.4 0.4-4.8 0.4-7.2 0.8-26 3.6-52 13.2-76.8 22.4-29.6 11.2-59.6 22.4-84.8 41.6-32 24-54.4 58.8-73.2 94-9.2 17.6-18 35.6-24.4 54.4-8 24-12 49.2-14 74.4 6 5.2 11.2 13.6 14.4 21.2z" fill="#E9E9E7" p-id="2190"></path><path d="M215.6 688.8c16 44 44 84.4 82.4 110.8 23.6 16.4 50.8 27.2 77.6 37.6 43.6 17.2 90 34.8 136 32.8 46.4 2 92.4-15.6 136-32.8 26.8-10.4 54-21.2 77.6-37.6 38.4-26.4 66.4-66.8 82.4-110.8s21.2-91.6 20-138.4c0-7.2-0.4-14.8-1.2-22-6 5.2-11.2 13.6-14.4 21.2-6.4 15.6-12.8 31.6-24 43.6-11.2 12.4-29.6 20-44.8 13.6-9.2-3.6-16.4-11.6-23.6-18.8-34.8-34-84-52-132.4-48 10 39.6 23.6 78.4 40.4 116 13.6 30 29.6 63.6 19.6 94.8-8.4 26.4-22 43.6-45.6 58.4-8 4.8-27.6 10-36.8 11.2-18 2-36.8-11.2-53.6-4.8-16.8-6.4-35.6 6.8-53.6 4.8-9.2-1.2-27.6-6-35.6-11.2-23.6-14.8-38-32-46.8-58.4-10-31.6 6-64.8 19.6-94.8 16.8-37.2 30.4-76 40.4-116-48-4-97.6 14-132.4 48-7.2 7.2-14 15.2-23.6 18.8-15.6 6-33.6-1.6-44.8-13.6-11.2-12.4-17.6-28.4-24-43.6-3.2-7.6-8.4-16-14.4-21.2-0.4 7.2-0.8 14.8-1.2 22-0.4 46.8 4.8 94.4 20.8 138.4z" fill="#BBC2C6" p-id="2191"></path><path d="M609.2 802.4c-5.6 4-11.6 8.4-18 10.8-6.4 2.4-13.6 2.8-20.4 2.8-13.6 0-26.8-1.2-40-3.6-2-0.4-4-0.8-5.6-2-2-1.6-3.2-4-4-6.8-1.2-4-2.8-8.4-1.2-12.4 2-5.2 8-7.6 12.8-10.4 6.8-3.2 12.8-7.6 18.8-12 8-5.6 15.6-11.2 23.6-16.8 6.4-4.8 13.6-10 15.2-18 1.6-7.6-3.2-16.8-10.8-18.8-2.8-0.8-5.6-0.8-8.4-0.4-13.2 0.4-26.8 0.8-40 1.6-6.8 0.4-31.2 0.4-38 0-13.2-0.4-26.8-0.8-40-1.6-2.8 0-5.6 0-8.4 0.4-7.6 2-12.4 10.8-10.8 18.8 1.6 8 8.8 13.2 15.2 18 8 5.6 15.6 11.2 23.6 16.8 6 4.4 12 8.8 18.8 12 5.2 2.4 11.2 4.8 12.8 10.4 1.2 4 0 8.4-1.2 12.4-0.8 2.4-1.6 5.2-4 6.8-1.6 1.2-3.6 1.6-5.6 2-13.2 2.4-26.8 4-40 3.6-6.8 0-14-0.4-20.4-2.8-6.8-2.4-12.4-6.4-18-10.8-6.4-4.8-13.2-9.6-19.6-14.4 4.4 6 9.2 12 13.6 17.6 2.4 3.2 4.8 6.4 8.4 8.8 3.2 2.4 7.2 3.6 11.2 4.8 4.4 1.6 8.8 2.8 13.2 3.6 7.2 1.6 14.4 1.6 21.6 1.6 16.4 0 32.4 0 48.8-0.4 16.4 0.4 32.4 0.4 48.8 0.4 7.2 0 14.4 0 21.6-1.6 4.4-0.8 8.8-2.4 13.2-3.6 4-1.2 8-2.4 11.2-4.8 3.2-2.4 5.6-5.6 8.4-8.8 4.4-6 9.2-12 13.6-17.6-6.8 4.8-13.6 9.6-20 14.4z" fill="#030303" p-id="2192"></path><path d="M373.2 496.8c2-4.8 2.8-9.6 5.6-14s7.6-7.2 12-10c9.6-6 20.8-12 31.6-8 3.6 1.2 6.8 3.6 10 6.4 8.4 7.2 16.4 15.2 20.4 25.6 4.4 10.8 4 22.8 1.2 34-4.4 19.2-15.2 36.4-26 53.2-17.2 27.2-36.8 56-67.2 66.8-6.8 2.4-14.8 4-21.2 0-2-1.2-4-3.2-5.6-5.2-2.8-3.2-6-6.4-8.8-10-10.4-11.6-21.2-24-26.8-38.8-1.2-2.8-2-6-1.6-8.8 0.4-3.2 2.4-5.6 4-8.4 10.8-16 22-32.4 36.8-45.6 13.2-11.6 29.2-21.2 35.6-37.2z" fill="#08070C" p-id="2193"></path><path d="M439.2 542.4c0 3.2-2.4 6-5.2 7.6-2.8 1.6-6 2-8.8 3.2-5.6 1.6-10.8 4.4-16.4 5.6-5.6 1.6-11.6 1.6-16.8-1.2-8-4.8-9.6-15.6-10-25.2 0-6 0-12.8 3.6-18 2-3.2 5.2-5.6 8-7.6 5.2-4 11.2-8.4 17.6-7.6 4.8 0.4 9.2 3.6 12 7.2 3.2 3.6 4.8 8.4 6.8 12.8 2.4 6 5.2 12 7.6 18 0.8 1.6 1.6 3.6 1.6 5.2z" fill="#302D3D" p-id="2194"></path><path d="M429.2 538c0.4 0.8 0.4 1.6 0.4 2.4 0 1.2-1.2 2-2 2.8-4.8 4.8-11.2 9.2-18 8-4-0.8-7.2-3.6-10.4-6-2-1.6-3.6-3.2-5.2-5.2-4.4-5.6-6.4-12.8-6.8-19.6 0-0.8 0-1.6 0.4-2.4 0.4-1.2 1.2-2 2.4-2.8 4.8-4 10.4-8 16.4-7.2 6 0.4 10.4 5.6 14 10.4 3.6 6 6.8 12.8 8.8 19.6z" fill="#010101" p-id="2195"></path><path d="M406 508c-5.2-0.4-9.6 2-13.6 5.2-0.8 2.8-1.2 5.6-1.2 8.8 0 13.2 8 24 17.6 24 8 0 14.8-7.2 16.8-17.2-1.6-3.6-3.6-7.2-6-10.8-3.2-4.8-7.6-9.6-13.6-10z" fill="#161525" p-id="2196"></path><path d="M398.8 526a8.4 7.6 90 1 0 15.2 0 8.4 7.6 90 1 0-15.2 0Z" fill="#010101" p-id="2197"></path><path d="M402.4 520.8m-4.8 0a4.8 4.8 0 1 0 9.6 0 4.8 4.8 0 1 0-9.6 0Z" fill="#FFFFFF" p-id="2198"></path><path d="M408.8 528.8m-2.4 0a2.4 2.4 0 1 0 4.8 0 2.4 2.4 0 1 0-4.8 0Z" fill="#FFFFFF" p-id="2199"></path><path d="M661.2 496.8c-2-4.8-2.8-9.6-5.6-14s-7.6-7.2-12-10c-9.6-6-20.8-12-31.6-8-3.6 1.2-6.8 3.6-10 6.4-8.4 7.2-16.4 15.2-20.4 25.6-4.4 10.8-4 22.8-1.2 34 4.4 19.2 15.2 36.4 26 53.2 17.2 27.2 36.8 56 67.2 66.8 6.8 2.4 14.8 4 21.2 0 2-1.2 4-3.2 5.6-5.2 2.8-3.2 6-6.4 8.8-10 10.4-11.6 21.2-24 26.8-38.8 1.2-2.8 2-6 1.6-8.8-0.4-3.2-2.4-5.6-4-8.4-10.8-16-22-32.4-36.8-45.6-13.6-11.6-29.6-21.2-35.6-37.2z" fill="#08070C" p-id="2200"></path><path d="M595.2 542.4c0 3.2 2.4 6 5.2 7.6 2.8 1.6 6 2 8.8 3.2 5.6 1.6 10.8 4.4 16.4 5.6 5.6 1.6 11.6 1.6 16.8-1.2 8-4.8 9.6-15.6 10-25.2 0-6 0-12.8-3.6-18-2-3.2-5.2-5.6-8-7.6-5.2-4-11.2-8.4-17.6-7.6-4.8 0.4-9.2 3.6-12 7.2-3.2 3.6-4.8 8.4-6.8 12.8-2.4 6-5.2 12-7.6 18-0.8 1.6-1.6 3.6-1.6 5.2z" fill="#302D3D" p-id="2201"></path><path d="M605.2 538c-0.4 0.8-0.4 1.6-0.4 2.4 0 1.2 1.2 2 2 2.8 4.8 4.8 11.2 9.2 18 8 4-0.8 7.2-3.6 10.4-6 2-1.6 3.6-3.2 5.2-5.2 4.4-5.6 6.4-12.8 6.8-19.6 0-0.8 0-1.6-0.4-2.4-0.4-1.2-1.2-2-2.4-2.8-4.8-4-10.4-8-16.4-7.2-6 0.4-10.4 5.6-14 10.4-3.6 6-6.8 12.8-8.8 19.6z" fill="#010101" p-id="2202"></path><path d="M628.4 508c5.2-0.4 9.6 2 13.6 5.2 0.8 2.8 1.2 5.6 1.2 8.8 0 13.2-8 24-17.6 24-8 0-14.8-7.2-16.8-17.2 1.6-3.6 3.6-7.2 6-10.8 3.2-4.8 7.6-9.6 13.6-10z" fill="#161525" p-id="2203"></path><path d="M620.4 526a8.4 7.6 90 1 0 15.2 0 8.4 7.6 90 1 0-15.2 0Z" fill="#010101" p-id="2204"></path><path d="M631.6 520.8m-4.8 0a4.8 4.8 0 1 0 9.6 0 4.8 4.8 0 1 0-9.6 0Z" fill="#FFFFFF" p-id="2205"></path><path d="M625.2 528.8m-2.4 0a2.4 2.4 0 1 0 4.8 0 2.4 2.4 0 1 0-4.8 0Z" fill="#FFFFFF" p-id="2206"></path><path d="M462 729.2c-2.8 2-3.2 6-3.2 9.6 0 1.2 0 2.8 0.8 3.6 0.4 0.8 0.8 1.2 1.6 1.6 2 2 4 3.6 6 5.6 2.8 2.4 5.2 5.2 8.4 6.8 3.2 2 6.8 3.2 10.4 2.8 0.4 0 0.8 0 0.8-0.4 0.4-0.4 0.4-0.4 0.4-0.8 1.2-8.8-3.2-17.6-7.6-24.8-1.2-1.6-2-3.2-3.6-4.4-2-1.2-4.8-1.2-7.2-1.2-2.8 0.4-4.8 0.4-6.8 1.6zM562 729.2c2.8 2 3.2 6 3.2 9.6 0 1.2 0 2.8-0.8 3.6-0.4 0.8-0.8 1.2-1.6 1.6-2 2-4 3.6-6 5.6-2.8 2.4-5.2 5.2-8.4 6.8-3.2 2-6.8 3.2-10.4 2.8-0.4 0-0.8 0-0.8-0.4-0.4-0.4-0.4-0.4-0.4-0.8-1.2-8.8 3.2-17.6 7.6-24.8 1.2-1.6 2-3.2 3.6-4.4 2-1.2 4.8-1.2 7.2-1.2 2.8 0.4 4.8 0.4 6.8 1.6z" fill="#1F1E24" p-id="2207"></path></svg>';
</script>

<template>
  <v-space direction="column">
    <v-space wrap>
      <v-icon :svg="panda" size="4rem" />
      <v-icon :svg="panda" spin size="4rem" />
    </v-space>
  </v-space>
</template>

图标光标

通过 cursor 定义图标光标

API

icon 属性

属性名	说明	类型	默认值
svg	svg内容或者svg的symbol	`enum`	-
size	图标大小	length	继承字体大小
spin	是否为自动旋转图标	`boolean`	false
rotate	图标默认角度	`number`	0
color	图标颜色	`string`	继承颜色
hover-color	图标悬停颜色	`string`	继承颜色
cursor	图标光标	`string`	default

其他

使用 iconfont

页面引入Symbol类型的图标代码

html

<script src="at.alicdn.com/t/font_2126466_0k1uy4dafct.js" />

传入引用图标的Symbol

vue

<script setup lang="ts">
const svgs = [
  'icon-shanchu',
  'icon-home',
  'icon-logo',
];
</script>

<template>
  <v-space direction="column">
    <v-space wrap>
      <v-icon v-for="svg in svgs" :key="svg" :svg="svg" />
    </v-space>
  </v-space>
</template>

Icon ​

基础用法 ​

调整尺寸 ​

图标角度 ​

旋转图标 ​

图标颜色 ​

图标悬停颜色 ​

多色图标 ​

图标光标 ​

API ​

icon 属性 ​

其他 ​

使用 iconfont ​