1、起因
跟着官网提供的方法进行安装依赖,通过svg可以显示图标出来入如果使用标签引入就不起效
如下记录
1、官方说的是拉取
# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
2、官网拷贝的图标
# 拷贝源码使用,图标不显示
<el-icon><AlarmClock/></el-icon>
# 拷贝svg,图标正常显示
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64h352z"></path></svg>
2、使图标生效
1、拉取图标依赖
npm install --save @element-plus/icons
2、在需要的页面进行引入
<script >
//首先是导入图标们,要用哪个就导入哪个
import {AlarmClock} from "@element-plus/icons";
export default {
//其次是写入components中
components: {
AlarmClock
}
};
</script>
当下载上面的图标依赖后
<el-icon><AlarmClock/></el-icon>
就可以正常使用了
3、版本管理