Icon
Using an SVG icon library can reduce project size and improve loading speed.
1. Basic use
html
<div style='display: flex;'>
<dk-icon>
<IconWeiXin></IconWeiXin>
</dk-icon>
<dk-icon :size='24' :color="'#18bb85'">
<IconWeiXin></IconWeiXin>
</dk-icon>
</div>
//Method 1 Traditional writing method
<script lang="ts">
import {svgList} from 'dk-plus'
components: {
IconShanchu1:svgList.IconShanchu1
}
</script>
//Method 2 Grammar sugar
<script setup lang="ts">
import { svgList } from '@dk-plus/components/_icon'
const { IconWeiXin } = svgList //Deconstruct assignment
const expose = { IconWeiXin } //Much derivable
</script>
展开
assemble
svg-icon
assemble,Click to copy income 179 ICONS
Stats
argument | Instructions | type | Optional value | Default value |
---|---|---|---|---|
color | icon colour | string | --- | --- |
size | icon size | string / number | --- | --- |
icon | icon content | IconType | --- | --- |
Slots
argument | Instructions |
---|---|
default | icon content |