记录ElementUIPlu使用图标不起效问题

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、版本管理