MMCAT UI

Appearance

Icon 图标 ​

MMCAT-UI 提供了一套常用的图标集合。

使用图标 ​

  • 如果你想像用例一样直接使用，你需要全局注册组件库，或者单独引入才能够直接在项目里使用。

  • 如若需要查看所有可用的 SVG 图标请查阅 @mmcat-ui/components/iconSvg

基本使用 ​

SVG 组件图标、字体图标

Show Code
vue
<script setup lang="ts">
// import { Edit } from "mmcat-ui"; // 可以单独引入
</script>

<template>
  <div class="item">
    <mc-icon :size="size" :color="color">
      <!-- SVG组件图标 -->
      <Edit />
    </mc-icon>
  </div>
  <div class="item">
    <mc-icon :size="size" :color="color">
      <!-- 字体图标(需要把iconfont.css里样式修改为font-size: inherit;) ，才能让size生效-->
      <i class="iconfont icon-bianji" />
    </mc-icon>
  </div>
</template>

<style>
@import "./src/asset/iconfont/iconfont.css";
</style>
<script setup lang="ts">
// import { Edit } from "mmcat-ui"; // 可以单独引入
</script>

<template>
  <div class="item">
    <mc-icon :size="size" :color="color">
      <!-- SVG组件图标 -->
      <Edit />
    </mc-icon>
  </div>
  <div class="item">
    <mc-icon :size="size" :color="color">
      <!-- 字体图标(需要把iconfont.css里样式修改为font-size: inherit;) ，才能让size生效-->
      <i class="iconfont icon-bianji" />
    </mc-icon>
  </div>
</template>

<style>
@import "./src/asset/iconfont/iconfont.css";
</style>

结合 mc-icon 使用 ​

mc-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。

Show Code
vue
<script setup lang="ts">
// import {
//   Edit,
//   User,
//   Search,
// } from "mmcat-ui"; // 可以单独引入
</script>

<template>
  <div class="item">
    <mc-icon :size="20">
      <!-- SVG组件图标 -->
      <Edit />
    </mc-icon>
  </div>
  <div class="item">
    <mc-icon :size="30" :color="'#3451b2'">
      <!-- SVG组件图标 -->
      <User />
    </mc-icon>
  </div>
  <div class="item">
    <mc-icon :size="20">
      <!-- SVG组件图标 -->
      <Search />
    </mc-icon>
  </div>
</template>
<script setup lang="ts">
// import {
//   Edit,
//   User,
//   Search,
// } from "mmcat-ui"; // 可以单独引入
</script>

<template>
  <div class="item">
    <mc-icon :size="20">
      <!-- SVG组件图标 -->
      <Edit />
    </mc-icon>
  </div>
  <div class="item">
    <mc-icon :size="30" :color="'#3451b2'">
      <!-- SVG组件图标 -->
      <User />
    </mc-icon>
  </div>
  <div class="item">
    <mc-icon :size="20">
      <!-- SVG组件图标 -->
      <Search />
    </mc-icon>
  </div>
</template>

直接使用 SVG 图标 ​

Show Code
vue
<script setup lang="ts">
// import {
// Edit,
// User,
// Search,
// Error,
// Warning,
// Success,
// } from "mmcat-ui"; // 可以单独引入
</script>

<template>
  <div style="font-size: 20px">
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <User style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
    <Error style="width: 1em; height: 1em; margin-right: 8px" />
    <Warning style="width: 1em; height: 1em; margin-right: 8px" />
    <Success style="width: 1em; height: 1em; margin-right: 8px" />
  </div>
</template>
<script setup lang="ts">
// import {
// Edit,
// User,
// Search,
// Error,
// Warning,
// Success,
// } from "mmcat-ui"; // 可以单独引入
</script>

<template>
  <div style="font-size: 20px">
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <User style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
    <Error style="width: 1em; height: 1em; margin-right: 8px" />
    <Warning style="width: 1em; height: 1em; margin-right: 8px" />
    <Success style="width: 1em; height: 1em; margin-right: 8px" />
  </div>
</template>

API ​

Attributes ​

属性名说明类型默认值
colorsvg 的 fill 颜色string继承颜色
sizeSVG 图标的大小，size x sizenumber / string继承字体大小

Slots ​

名称说明
default自定义默认内容