萤途个人博客

[[ slide_text ]]

[[ item.c ]]

element-plus icon图标

发布时间: 2026-01-24 作者: wshsm 来源: yt

Vue

# element-plus icon图标

## icon引用-组件名格式规范

本篇主要是介绍引用icon图标时`<el-icon><document-copy /></el-icon>`,`<el-icon><DocumentCopy /></el-icon>`两种不同的引用方式的区别

首先`<el-icon><document-copy /></el-icon>`的这种 PascalCase 的命名格式，是合法的 JavaScript 标识符。但是，由于你是在 index.html 直接写代码（DOM 模板），Vue 官方文档明确指出：

“在原生的 HTML 模板中，你应该始终使用 kebab-case 命名法。”

因此就会出现 `<el-icon><DocumentCopy /></el-icon>` 无法显示的问题

总结：
- 在 JS 里： 使用大写驼峰，比如 ElementPlusIconsVue.DocumentCopy。
- 在 HTML 里： 使用小写横杠，比如 <document-copy />。

## 使用时机问题

由于 Vue 的组件（如 <el-icon> 和 <document-copy>）需要被 Vue 的编译器“编译”后才能变成浏览器能看懂的 SVG 图标。当你使用 jQuery 的 append 方法添加 HTML 字符串时，例如下面这样：

```
let iconSvg = '<el-icon><document-copy /></el-icon>'
let copy = $('<i>' + iconSvg + '</i>');
$(this).append(copy)
```

这些内容是直接插入 DOM 的，完全绕过了 Vue 的编译过程。浏览器看到 <document-copy> 这个标签，不知道它是干什么的（因为它不是标准的 HTML 标签），所以什么都不显示。

解决方法就是直接使用原生 SVG，直接加载官方的 SVG 代码，例如下面这样：

```
let iconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" ><path fill="currentColor" d="巴拉巴拉巴拉巴拉..."></path></svg>'
let copy = $('<i title="copy" class="code_copy">' + iconSvg + '</i>');
$(this).append(copy)
```

## 参考网址链接

组件注册

```
https://cn.vuejs.org/guide/components/registration
```

图标库

```
https://element-plus.org/zh-CN/component/icon
```

你觉得文章怎么样