使用自定义图标

iconfont.js

使用 iconfont.js.需要先引入 iconfont.js文件, iconfont中自定义导出的图标必须要以 "es-" 为前缀才可以使用ESIcon组件。默认下载iconfont.js

//main.ts
import { createApp } from 'vue'
import App from './App.vue'

import 'earthsdk-ui/lib/style.css';
import EarthSDKUI from 'earthsdk-ui';

//自定义的iconfont
import './iconfont.js'

const app = createApp(App)
app.use(EarthSDKUI)
app.mount('#app')

示例

<script setup lang="ts">
import { ESIcon, Message } from 'earthsdk-ui'
const iconList = ['unchecked', 'indeterminate', 'checked', 'unshow', 'show']
//复制
const copyName = (text: string) => {
    navigator.clipboard.writeText(text)
        .then(function () {
            Message.success('复制成功');
        }, function () {
            Message.error('复制失败');
        });
}
</script>
<template>
    <ul class="es-icon-list">
        <li v-for="item in iconList" @click="copyName(item)" class="es-icon-item">
            <span>
                <es-tooltip :tooltip="item" position="top">
                    <ESIcon :name="item" color="#666" />
                </es-tooltip>
            </span>
            <span class="es-copy-name">{{ item }}</span>
        </li>
    </ul>
</template>
<style scoped lang="css">
.es-icon-list {
    width: 100%;
    color: #5e6d82;
    list-style: none;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.es-icon-item {
    text-align: center;
    width: 120px;
    height: 100px;
    color: #666;
    font-size: 13px;
    border: 1px solid #ececec6b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 0 -1px -1px;
}

.es-icon-item:hover {
    border: 1px solid #A8B1EA;
    transition: all 0.3s ease-in-out;
}

.es-copy-name {
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

Attributes

属性名	说明	类型	默认值
name	图标名称	string	无
color	颜色	string	无
size	图标大小	number	无

使用内置图标

示例

<script setup lang="ts">
//安装 yarn add earthsdk-icon
import {
    Checked, Code, Delete,
    Down, Download, Error,
    Indeterminate, Left, Loading,
    Right, Search, Show, Success,
    Tip, Unchecked, Unshow, Up,
    Upload, Waring, Xiqu, Xunwen, Minus, Add
} from "earthsdk-icon";
</script>

<template>
    <div style="height: 100px;margin: 10px; display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
        <Checked style="color:red" />
        <Code />
        <Delete />
        <Down />
        <Download />
        <Error />
        <Indeterminate />
        <Left />
        <Loading />
        <Right />
        <Search />
        <Show />
        <Success />
        <Tip />
        <Unchecked />
        <Unshow />
        <Up />
        <Upload />
        <Waring />
        <Xiqu />
        <Xunwen />
        <Minus />
        <Add />
    </div>
</template>