组合图标

你可以通过嵌套 SVG 元素，把多个图标组合成一个图标。 当你希望基于现有图标创建自定义图标时，这种方式会很有用。

<script setup>
import { Scan, User } from '@ycloud-web/icons-vue';
</script>

<template>
  <div class="app">
    <Scan :size="48">
      <User
        :size="12"
        x="6"
        y="6"
        absoluteStrokeWidth
      />
    </Scan>
  </div>
</template>

Open Sandbox

这是合法用法，因为 SVG 可以嵌套，并且图标支持所有 SVG 属性。 你可以通过调整 x 和 y 坐标，把内部图标放到需要的位置。

限制

组合图标时，需要确保 x 和 y 坐标位于外层图标的 viewBox 范围内（24x24）。

与原生 SVG 元素组合

你也可以把 YCloud Icons 和原生 SVG 元素组合起来，构建自定义图标变体。

通知徽标示例

例如，可以通过 circle SVG 元素给图标添加一个通知徽标。

<script setup>
import { Mail } from '@ycloud-web/icons-vue';

const hasUnreadMessages = true;
</script>

<template>
  <div class="app">
    <Mail :size="48">
      <circle
        v-if="hasUnreadMessages"
        r="3"
        cx="21"
        cy="5"
        stroke="none"
        fill="#F56565"
      />
    </Mail>
  </div>
</template>

Open Sandbox

文本元素示例

也可以使用 text SVG 元素给图标添加文本。

<script setup>
import { File } from '@ycloud-web/icons-vue';
</script>

<template>
  <div class="app">
    <File :size="48">
      <text
        x="7.5"
        y="19"
        font-size="8"
        font-family="Verdana,sans-serif"
        :stroke-width="1"
      >
        JS
      </text>
    </File>
  </div>
</template>

Open Sandbox