Element Plus 中使用阿里图标库:详细步骤与示例
-
首先需要在阿里图标库中选择需要使用的图标,然后点击右侧的'复制代码'按钮,将代码复制到剪贴板中。
-
在 Element Plus 中,使用
<icon>标签来引用图标。在<icon>中设置 type 属性并将其设置为图标的名称,如下所示:
<icon type='icon-name'></icon>
- 将阿里图标库中复制的代码粘贴到
<script>标签中,如下所示:
<script src='//at.alicdn.com/t/font_1234567_abcd1234.js'></script>
其中,font_1234567_abcd1234.js 是阿里图标库中图标字体文件的名称,需要替换为自己所选图标的字体文件名称。
- 最后,在页面中引用
<icon>标签,即可显示所选的阿里图标库图标。
完整示例代码如下:
<template>
<div>
<icon type='icon-name'></icon>
</div>
</template>
<script>
export default {
name: 'MyComponent',
mounted() {
const script = document.createElement('script');
script.src = '//at.alicdn.com/t/font_1234567_abcd1234.js';
document.head.appendChild(script);
}
}
</script>
原文地址: https://www.cveoy.top/t/topic/mlUN 著作权归作者所有。请勿转载和采集!