如何使用Element UI将代码显示为小图标

"如何使用Element UI将代码显示为小图标"\n\n要将代码显示为一个小图标，可以使用Element UI的图标组件el-icon，并在其中嵌套自定义的图标组件。\n\n首先，需要在代码中导入el-icon组件：\n\nhtml\n<template>\n <el-icon>\n <DocumentIcon />\n </el-icon>\n</template>\n\n<script>\nimport DocumentIcon from './DocumentIcon.vue';\n\nexport default {\n components: {\n DocumentIcon\n },\n // ...\n}\n</script>\n\n\n然后，创建一个名为DocumentIcon的组件，用于显示自定义的图标。\n\nvue\n<template>\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon-document">\n <!-- 添加自定义图标的路径 -->\n </svg>\n</template>\n\n<script>\n export default {\n // ...\n}\n</script>\n\n<style scoped>\n.icon-document {\n width: 1em;\n height: 1em;\n vertical-align: -0.15em;\n fill: currentColor;\n overflow: hidden;\n}\n</style>\n\n\n在DocumentIcon组件中，可以使用SVG标签添加自定义的图标路径，也可以使用其他方式来绘制图标。\n\n最后，在需要显示小图标的地方替换代码：\n\nhtml\n<i-ep-grid class="icon-grid" @click="copyText(scope.row.deliveryNo)">\n <el-icon>\n <DocumentIcon />\n </el-icon>\n</i-ep-grid>\n\n\n通过以上步骤，你可以将原来的代码显示为一个小图标。请记得根据实际情况修改自定义图标的路径和样式。