VC 组件库

Appearance

svg-icon ​

功能 ​

基于 iconfont.cn 封装的 icon 组件。使用全量加载。

  • 通过 font-size 控制 icon 大小，color 控制 icon 的颜色。
  • 你可以通过 iconfont.cn 挑选你需要 icon。
  • 最后加载 Symbol 模式提供的 js 可以通过 config-provider 加载，也可以像这样
html
<!doctype html>
<html lang="en">
    <head>
        <!-- .... -->
        <!-- iconfont 提供的 js，你需要换成自己的 js 地址 -->
        <script src="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"></script>
        <!-- .... -->
    </head>
</html>

功能示例 ​

展示区
展示区
图标和文字混排看看对齐情况
大小控制
颜色控制
展示区：插槽

最小示例 ​

vue
<template>
    <Wrapper>
        <VcConfigProvider iconfont-url="//at.alicdn.com/t/font_2923719_83xgwd9wy2l.js">
            <VcSVGIcon name="role" />
        </VcConfigProvider>
        <!-- 自定义插槽内容 -->
        <VcSVGIcon name="screenfull" viewBox="0 0 1024 1024">
            <path d="M170.666667 170.666667v213.333333H85.333333V85.333333h298.666667v85.333334H170.666667z m682.666666 213.333333V170.666667h-213.333333V85.333333h298.666667v298.666667h-85.333334zM170.666667 640v213.333333h213.333333v85.333334H85.333333v-298.666667h85.333334z m682.666666 0h85.333334v298.666667h-298.666667v-85.333334h213.333333v-213.333333z" />
        </VcSVGIcon>
    </Wrapper>
</template>

<script lang="ts" setup>
import VcConfigProvider from '@/components/config-provider/config-provider.vue'
import VcSVGIcon from '../svg-icon.vue'
</script>

API ​