common-icons

一个动态显示 SVG 图标的 Vue 组件库。

用法

<template>
  <div class="examples">
    <!-- 使用默认分类下的 'add' 图标, 并设置为绿色 -->
    <svg-icon name="add" :size="32" color="green" />

    <!-- 'Apple' 图标的颜色无法通过 color 属性更改，因为它本身包含颜色信息 -->
    <svg-icon category="Icons8" name="Apple" :size="32" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import SvgIcon from "@junhe/common-icons";

export default Vue.extend({
  components: { SvgIcon },
});
</script>

Props

| 属性名 | 类型 | 含义 | 默认值 | | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------- | ---------------- | | name | string | 要显示的图标名称。 | 必填 | | category | string | 图标的分类。 | 'default' | | size | string | number | 图标的大小（像素）。 | 16 | | color | string | 图标的填充颜色。 'currentColor' 是一个 CSS 关键字，它会使图标颜色继承其父元素的文本颜色 (color 属性)。 | 'currentColor' |

Demo

点击跳转