<template>
  <u-container-layout class="components-container">
    <div class="content-box">
      <el-alert
          title="普通引入方式 Font Class"
          type="warning"
          :closable="false"
      />
      <br />
      <div class="icon-list">
        <span class="iconfont icon-dabaoyu"></span>
        <span class="iconfont icon-yin"></span>
        <span class="iconfont icon-dabaoyu"></span>
        <span class="iconfont icon-shuaxin1"></span>
        <span class="iconfont icon-shuaxin"></span>
        <span class="iconfont icon-duoyun-2-copy"></span>
        <span class="iconfont icon-duoyun-1"></span>
        <span class="iconfont icon-daxue"></span>
        <span class="iconfont icon-dayu"></span>
        <span class="iconfont icon-feng"></span>
      </div>

      <el-alert
          title="Symbol 的方式渲染图标 支持多色"
          type="warning"
          :closable="false"
      />
      <div class="icon-list">
        <SvgIcon icon-class="feng" class-name="iconfont"/>
        <SvgIcon icon-class="zhongxue" class-name="iconfont"/>
        <SvgIcon icon-class="yangchen" class-name="iconfont"/>
        <SvgIcon icon-class="yujiaxue" class-name="iconfont"/>
        <SvgIcon icon-class="qing" class-name="iconfont"/>
        <SvgIcon icon-class="mai" class-name="iconfont"/>
        <SvgIcon icon-class="wu" class-name="iconfont"/>
        <SvgIcon icon-class="xiaoyu" class-name="iconfont"/>
        <SvgIcon icon-class="xiaoxue" class-name="iconfont"/>
        <SvgIcon icon-class="shandian" class-name="iconfont"/>
        <SvgIcon icon-class="xue" class-name="iconfont"/>
      </div>

    </div>
  </u-container-layout>

</template>

<script setup lang="ts" name="svgIcon">
import SvgIcon from "@/components/SvgIcon/index.vue";
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
