icon 图标el-icon-right

根据引用内容中提供的信息，可以使用CSS的animation属性来实现图标的旋转效果。对于el-icon-right图标，你可以添加以下样式代码：

<i class="el-icon-right" style="font-size: 22px; animation: rotating 2s linear infinite;"></i>

其中rotating是自定义的动画名称，2s表示动画的持续时间为2秒，linear表示动画以匀速运动，infinite表示动画循环无限次执行。

使用这个样式，el-icon-right图标将会以顺时针方向进行旋转。如果你想改变旋转方向，可以使用animation-direction属性，设置为reverse逆时针。例如：

<i class="el-icon-right" style="font-size: 22px; animation: rotating 2s linear infinite reverse;"></i>

这样el-icon-right图标将会以逆时针方向进行旋转。希望这个回答对你有帮助！

相关问题

el-icon--right

el-icon--right是一个图标类，它在饿了么UI库中使用广泛，通常用于表示向右的箭头。它的样式定义可以在项目中的CSS文件中找到，如下所示：

.el-icon--right:before {
  content: "\\e602";
}

其中，content属性指定了该图标的Unicode编码，也可以使用其他方式定义图标的样式。需要注意的是，el-icon--right是饿了么UI库中的一个组件，只有在引入该库后才能使用。

element-plus中el-icon el-tree-node__expand-icon expanded 图标没有跟着变

这可能是因为你使用了自定义的图标，而没有更新自定义图标的样式。

你可以尝试在展开和折叠节点时，手动切换图标的样式。例如：

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
    <template #default="{ node, data }">
      <span class="custom-icon" :class="{'el-icon-arrow-right': !node.expanded, 'el-icon-arrow-down': node.expanded}" v-if="!data.loading"></span>
    </template>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                { label: '三级 1-1-1' },
                { label: '三级 1-1-2' }
              ]
            },
            {
              label: '二级 1-2',
              children: [
                { label: '三级 1-2-1' },
                { label: '三级 1-2-2' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick(data, node) {
      node.expanded = !node.expanded
      node.iconClass = node.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right'
    }
  }
}
</script>

<style scoped>
.custom-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center;
}
.el-icon-arrow-right:before {
  content: '\e61b';
}
.el-icon-arrow-down:before {
  content: '\e61a';
}
</style>

在这个例子中，我们使用了一个自定义的图标，并在展开和折叠节点时，手动切换图标的样式。这样可以确保图标随着节点的展开和折叠而正确地变化。