-
element-plus icon图标
# 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 ```