图标 Icon

语义化的矢量图形 🐥

不同颜色

<template>
  <div class="flex">
    <div class="icon-demo-box"><ik-icon name="star-fill" color="#cd8025" /></div>
    <div class="icon-demo-box"><ik-icon name="star-fill" color="#5aa4ae" /></div>
    <div class="icon-demo-box"><ik-icon name="star-fill" color="#f29a76" /></div>
    <div class="icon-demo-box"><ik-icon name="heart-fill" color="#b13b2e" /></div>
  </div>
</template>

显示代码

复制代码片段

不同大小

<template>
  <div class="flex">
    <div class="icon-demo-box"><ik-icon name="heart-fill" color="red" /></div>
    <div class="icon-demo-box"><ik-icon name="heart-fill" color="red" :size="28" /></div>
    <div class="icon-demo-box"><ik-icon name="heart-fill" color="red" :size="34" /></div>
    <div class="icon-demo-box"><ik-icon name="heart-fill" color="red" :size="42" /></div>
  </div>
</template>

显示代码

复制代码片段

部分展示

点击展开

<script lang="ts" setup>
const list = [
  'bell',
  'email',
  'main',
  'user',
  'likes',
  'search',
  'chart',
  'add',
  'kongtiao',
  'files',
  'zhire',
  'switch',
]
</script>
<template>
  <div class="flex">
    <template v-for="item in list">
      <div class="icon-demo-box"><ik-icon :name="item" /></div>
    </template>
  </div>
</template>

attrs

参数	说明	类型	可选值	默认值
name	名称	string
size	大小	string	-	-
color	颜色	string<CSSProperties>	-	-