icons svg

## svg icon 图标，转自element icon
点击以下对应的图标可以复制

![](/media/202404/2024-04-29_160946_497052.png)

------------
这是所有图标

------------
代码示例如下
```html
<template>
    <div id="hi-icon">
        <hi-row>
            <hi-col
                class="icon-item"
                span="6"
                v-for="(item,index) in iconsList"
                v-clipboard:copy="item.tag"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
            >
                <div class="tip"></div>
                <hi-svg-icon :icon-class="item.name" style="font-size:32px"/>
                <div class="icon-name" v-html="item.name"></div
            ></hi-col>
        </hi-row>
    </div>
</template>
<script>
    export default {
        data() {
            const req = require.context("./svg", false, /\.svg$/),
                iconsList = [];
            req.keys().map((r) => {
                let name = r.replace(".\/", "").split(".")[0];
                iconsList.push({
                    name: name,
                    tag: `<hi-svg-icon icon-class="${name}"/>`,
                });
            });
            return {
                iconsList: iconsList,
            };
        },
        methods: {
            // 复制成功回调
            onCopy(data) {
                console.log("success", data);
                let el = data.event.currentTarget,
                    cls = el.className;
                el.className = `${cls} coping`;
                el.querySelector(".tip").innerHTML = "复制成功";
                setTimeout((r) => {
                    el.className = cls.replace("coping");
                }, 2000);
            },
            // 复制失败回调
            onError(data) {
                console.log("error", data);
            },
        },
    };
</script>
<style lang="less">
    #hi-icon {
        text-align: center;
        .icon-item {
            padding: 20px 5px;
            border: 1px #ddd solid;
            margin: -1px 0 0 -1px;
            position: relative;
            .tip {
                position: absolute;
                right: 0;
                top: 0;
                padding: 5px;
                color: #096dd9;
                display: none;
                font-size: 12px;
                color: #00dc00;
            }
            &.coping {
                .tip {
                    display: block;
                }
            }
            &:hover {
                cursor: pointer;
                color: #fff;
                background-color: #096dd9;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            }
        }
        .icon-name {
            padding: 5px;
        }
    }
</style>
```

</div>

</style>