Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Component] [icon] cdn方式引入图标，有的图标不显示 #16749

Closed
stupidream opened this issue May 5, 2024 · 2 comments
Closed

[Component] [icon] cdn方式引入图标，有的图标不显示 #16749

stupidream opened this issue May 5, 2024 · 2 comments

Comments

@stupidream
Copy link

Bug Type: Component

Environment

  • Vue Version: 3.4.22
  • Element Plus Version: 2.7.0
  • Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
  • Build Tool: CDN

Reproduction

Related Component

  • el-icon

Reproduction Link

CodePen

Steps to reproduce

编写某个图标如：

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-icon><View /></el-icon>
      <el-icon><ChatDotSquare /></el-icon>
      <el-icon><Loading /></el-icon>
      {{ message }}
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Loading前面两个显示不出来, 不止一个图标，还有更多图标显示不出来",
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
      }
      app.mount("#app");
    </script>
  </body>
</html>

What is Expected?

显示图标

What is actually happening?

没有显示图标，有的图标显示，有的图标不显示如View

Additional comments

(empty)
@chenxch
Copy link
Member

chenxch commented May 6, 2024 

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-icon><view-icon></view-icon></el-icon>
      <el-icon><chat-dot-square></chat-dot-square></el-icon>
      <el-icon><loading></loading></el-icon>
      {{ message }}
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Loading前面两个显示不出来, 不止一个图标，还有更多图标显示不出来",
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
        if(key==='View'){
          app.component('viewIcon', component)
        }
      }
      app.mount("#app");
    </script>
  </body>
</html>
  • 使用串式闭标签写法
  • view因为和原生view标签重名，需要注册时候给它改个名字

@github-actions GitHub Actions
Copy link

github-actions bot commented Jun 5, 2024

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

此 issue 已被自动锁定，因为关闭后没有任何近期活动。如果有相关 bug，请重新创建一个新 issue。

@github-actions github-actions bot locked and limited conversation to collaborators Jun 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stupidream @chenxch