html单页面中引入element-plus的图标icon

deku-yzh

已于 2024-07-15 16:58:41 修改

阅读量790

点赞数 3

文章标签： html javascript 前端

于 2024-07-15 14:29:57 首次发布

本文链接：https://blog.csdn.net/qq_36660135/article/details/140438110

版权

实现效果
在这里插入图片描述
实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Element Plus Icons with Vue 3</title>
    <script src="https://unpkg.com/vue"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Import ElementPlus Icons-Vue -->
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <style>
      #app {
        width: 20px;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 使用 Element Plus 的图标组件 -->
      <el-icon class="icon">
        <Plus />
      </el-icon>
    </div>

    <script>
      const { createApp } = Vue;

      const app = createApp({
        // 注册 Vue 组件
        components: {
          'plus': ElementPlusIconsVue.Plus,
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>