Icon 图标
使用 svg 的图标库,可以减少项目体积,提高加载速度。
1.基本使用
html
<div style='display: flex;'>
<dk-icon>
<IconWeiXin></IconWeiXin>
</dk-icon>
<dk-icon :size='24' :color="'#18bb85'">
<IconWeiXin></IconWeiXin>
</dk-icon>
</div>
//方法一 传统写法
<script lang="ts">
import {svgList} from 'dk-plus'
components: {
IconShanchu1:svgList.IconShanchu1
}
</script>
//方法二 语法糖
<script setup lang="ts">
import { svgList } from '@dk-plus/components/_icon'
const { IconWeiXin } = svgList //解构赋值
const expose = { IconWeiXin } //可导出很多
</script>
展开
集合
svg-icon
集合,点击即可复制,共收入 179 个图标
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
color | icon 颜色 | string | --- | --- |
size | icon 大小 | string / number | --- | --- |
icon | icon 内容 | IconType | --- | --- |
Slots(插槽)
参数 | 说明 |
---|---|
default | icon 内容 |