【Vue3系列】vue-press2 中使用 Element-Plus的Icon 图标

Element Plus 提供了一套常用的图标集合。

1.使用图标# 如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。

2.如若想查看所有可用的 SVG 图标请查阅 @element-plus/icons-vue 和 element-plus-icons
的源代码或当前页的 Icon Collection

3.CDN 导入和 自动导入 正在开发中。

1.安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

2.导入
vue3 目前只支持按需导入

 <el-icon><caret-bottom /></el-icon>

import { CaretBottom } from '@element-plus/icons-vue' // svg图标
import { Calendar, Search } from '@element-plus/icons-vue'

基础用法

<!-- 使用 el-icon 标签来包裹 SVG 图标 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <edit />
    </el-icon>
    <!-- 也可以直接使用图标标签，无需父标签包裹 -->
    <edit />
  </div>
</template>

3.显示

4.hover作用另外一个对象,css:hover状态改变另一个元素样式的使用

这里我想hover整个大盒子，只让icon变色，便是这样

.personal-center-info {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      width: 200px;
      height: 100%;
      line-height: 100%;
      margin: auto;
    }
    .personal-center-info:hover .el-icon {
      color: red;
    }

5.如果让鼠标往下滑的时候让下面这个Hover继续保持呢

 .personal-center-info:hover .personal-center-info__detail {
      display: block;
      transform: scale(1.1);
      transition: all 1s linear;
    }```