scripts/iconfont-template.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Iconfont</title>
    <link rel="stylesheet" type="text/css" href="{{cssUrl}}" />
    <style>
      body {
        padding: 0;
        font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      }
      ul {
        padding: 0;
        margin: 0;
      }
      ul.kaitian-icons {
        margin: 10px 0;
        overflow: hidden;
        list-style: none;
      }
      ul.kaitian-icons li {
        position: relative;
        float: left;
        width: 16.66%;
        height: 100px;
        margin: 3px 0;
        padding: 10px 0 0;
        overflow: hidden;
        color: #555;
        text-align: center;
        list-style: none;
        background-color: #fff;
        border-radius: 4px;
        cursor: pointer;
        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
      }

      ul.kaitian-icons li::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        line-height: 110px;
        text-align: center;
        opacity: 0;
        transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        content: 'Copied!';
      }

      ul.kaitian-icons li.copied::after {
        top: -10px;
        opacity: 1;
      }

      ul.kaitian-icons li:hover {
        color: #fff;
        background-color: #1890ff;
      }

      ul.kaitian-icons li.copied:hover {
        color: rgba(255, 255, 255, 0.2);
      }

      .kaitian-icon {
        margin: 12px 0 8px;
        font-size: 36px;
        transition: transform 0.3s ease-in-out;
        will-change: transform;
      }

      .icon-name-wrapper {
        white-space: nowrap;
        text-align: center;
        margin-top: 10px;
      }

      .icon-name {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div style="text-align: center">
      <h2>OpenSumi built-in icon list</h2>
      <p>OpenSumi v{{version}}</p>
      <p>{{cssUrl}}</p>

      <div>click to copy icon name</div>
    </div>

    <ul class="kaitian-icons" id="kaitian-icons">
      {{#each iconList}}
      <li data-icon="{{this}}">
        <i aria-label="图标: {{this}}" class="kaitian-icon kticon-{{this}}"> </i>
        <div class="icon-name-wrapper">
          <span class="icon-name">{{this}}</span>
        </div>
      </li>
      {{/each}}
    </ul>

    <script>
      document.querySelector('.kaitian-icons').addEventListener('click', (e) => {
        e.preventDefault();
        const $iconTargetLi = e.target.nodeName === 'LI' ? e.target : event.target.closest('li');
        if ($iconTargetLi) {
          const iconName = $iconTargetLi.getAttribute('data-icon');
          window.navigator.clipboard
            .writeText(iconName)
            .then(() => {
              $iconTargetLi.classList.add('copied');
              setTimeout(() => {
                $iconTargetLi.classList.remove('copied');
              }, 1000);
              console.log('copied success');
            })
            .catch((err) => console.log(err));
        }
      });
    </script>
  </body>
</html>