CreateUI

Appearance

Return to top
On this page

Icon 图标

Create UI 并没有提供一套属于自己的图标库，但是通过封装@Iconify/vue的组件，你可以使用icones.js里的全部图标。

关于icones.js的图标内容，请查看icones文档

基本使用

你可以引入<c-icon>标签，通过icon属性来传入你想要使用的图标。

<template>
  <c-icon icon="ant-design:car-twotone" />
</template>

<script lang="ts" setup></script>

<style scoped></style>

设置颜色和大小

你可以通过color和size属性来设置图标的颜色和大小。

<template>
  <c-icon icon="ant-design:car-filled"></c-icon>
  <c-icon icon="ant-design:car-filled" color="pink" size="40"></c-icon>
</template>

<script lang="ts" setup></script>

<style scoped></style>

可以点击的图标

你可以传入clickable属性，设置图标为可点击。之后，你可以传入你的鼠标单击监听器。 除了clickable属性，你还可以传入hover-color属性，表示鼠标经过图标时所显示的颜色。

注意，hover-color属性不能用于已经有颜色的图标。

<template>
  <c-icon
    icon="ant-design:car-filled"
    size="40"
    clickable
    hover-color="pink"
  ></c-icon>
</template>

<script lang="ts" setup></script>

<style scoped></style>

使用svg图标

如果你有自己的svg图标，你可以直接复制svg在图标标签中。

<template>
  <c-icon>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 24 24"
    >
      <path
        fill="currentColor"
        d="M2 3h3.5L12 15l6.5-12H22L12 21L2 3m4.5 0h3L12 7.58L14.5 3h3L12 13.08L6.5 3Z"
      />
    </svg>
  </c-icon>
  <c-icon size="32" color="green" clickable hover-color="pink">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 24 24"
    >
      <path
        fill="currentColor"
        d="M2 3h3.5L12 15l6.5-12H22L12 21L2 3m4.5 0h3L12 7.58L14.5 3h3L12 13.08L6.5 3Z"
      />
    </svg>
  </c-icon>
</template>

<script lang="ts" setup></script>

<style scoped></style>