|
@@ -1,37 +1,41 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="demo">
|
|
<div class="demo">
|
|
|
|
|
+ <h2>Svg 按需使用</h2>
|
|
|
|
|
+ <nut-cell>
|
|
|
|
|
+ <Add color="red" />
|
|
|
|
|
+ </nut-cell>
|
|
|
<h2>基础用法</h2>
|
|
<h2>基础用法</h2>
|
|
|
<nut-cell>
|
|
<nut-cell>
|
|
|
- <nut-icon name="dongdong"></nut-icon>
|
|
|
|
|
- <nut-icon name="JD"></nut-icon>
|
|
|
|
|
|
|
+ <IconFont name="dongdong"></IconFont>
|
|
|
|
|
+ <IconFont name="JD"></IconFont>
|
|
|
</nut-cell>
|
|
</nut-cell>
|
|
|
<h2>图片链接</h2>
|
|
<h2>图片链接</h2>
|
|
|
<nut-cell>
|
|
<nut-cell>
|
|
|
- <nut-icon
|
|
|
|
|
|
|
+ <IconFont
|
|
|
size="40"
|
|
size="40"
|
|
|
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
|
|
name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
|
|
|
>
|
|
>
|
|
|
- </nut-icon>
|
|
|
|
|
|
|
+ </IconFont>
|
|
|
</nut-cell>
|
|
</nut-cell>
|
|
|
<h2>图标颜色</h2>
|
|
<h2>图标颜色</h2>
|
|
|
<nut-cell>
|
|
<nut-cell>
|
|
|
- <nut-icon name="dongdong" color="#fa2c19"></nut-icon>
|
|
|
|
|
- <nut-icon name="dongdong" color="#64b578"></nut-icon>
|
|
|
|
|
- <nut-icon name="JD" color="#fa2c19"></nut-icon>
|
|
|
|
|
|
|
+ <IconFont name="dongdong" color="#fa2c19"></IconFont>
|
|
|
|
|
+ <IconFont name="dongdong" color="#64b578"></IconFont>
|
|
|
|
|
+ <IconFont name="JD" color="#fa2c19"></IconFont>
|
|
|
</nut-cell>
|
|
</nut-cell>
|
|
|
|
|
|
|
|
<h2>图标大小</h2>
|
|
<h2>图标大小</h2>
|
|
|
<nut-cell>
|
|
<nut-cell>
|
|
|
- <nut-icon name="dongdong"></nut-icon>
|
|
|
|
|
- <nut-icon name="dongdong" size="24"></nut-icon>
|
|
|
|
|
- <nut-icon name="dongdong" size="26"></nut-icon>
|
|
|
|
|
|
|
+ <IconFont name="dongdong"></IconFont>
|
|
|
|
|
+ <IconFont name="dongdong" size="24"></IconFont>
|
|
|
|
|
+ <IconFont name="dongdong" size="26"></IconFont>
|
|
|
</nut-cell>
|
|
</nut-cell>
|
|
|
|
|
|
|
|
<nut-cell-group v-for="item in icons.data" :title="item.name" :key="item">
|
|
<nut-cell-group v-for="item in icons.data" :title="item.name" :key="item">
|
|
|
<nut-cell>
|
|
<nut-cell>
|
|
|
<ul>
|
|
<ul>
|
|
|
<li v-for="item in item.icons" :key="item">
|
|
<li v-for="item in item.icons" :key="item">
|
|
|
- <nut-icon :name="item"></nut-icon>
|
|
|
|
|
|
|
+ <IconFont :name="item"></IconFont>
|
|
|
<span>{{ item }}</span>
|
|
<span>{{ item }}</span>
|
|
|
</li>
|
|
</li>
|
|
|
</ul>
|
|
</ul>
|
|
@@ -42,10 +46,10 @@
|
|
|
<nut-cell>
|
|
<nut-cell>
|
|
|
<ul>
|
|
<ul>
|
|
|
<li v-for="it in item.icons" :key="it">
|
|
<li v-for="it in item.icons" :key="it">
|
|
|
- <nut-icon
|
|
|
|
|
|
|
+ <IconFont
|
|
|
:name="it.name"
|
|
:name="it.name"
|
|
|
:class="`nut-icon-${it['animation-name']} nut-icon-${it['animation-time']}`"
|
|
:class="`nut-icon-${it['animation-name']} nut-icon-${it['animation-time']}`"
|
|
|
- ></nut-icon>
|
|
|
|
|
|
|
+ ></IconFont>
|
|
|
<span>{{ it['animation-name'] }}</span>
|
|
<span>{{ it['animation-name'] }}</span>
|
|
|
</li>
|
|
</li>
|
|
|
</ul>
|
|
</ul>
|
|
@@ -55,11 +59,12 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
-import { config } from '@nutui/icons-vue';
|
|
|
|
|
|
|
+import { Add, IconFontConfig, IconFont } from '@nutui/icons-vue';
|
|
|
export default {
|
|
export default {
|
|
|
props: {},
|
|
props: {},
|
|
|
|
|
+ components: { IconFont, Add },
|
|
|
setup() {
|
|
setup() {
|
|
|
- return { icons: [] };
|
|
|
|
|
|
|
+ return { icons: IconFontConfig };
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|