<icon-custom-right color-primary /> --> ，怎么把right做成动态的，vue

如果你想在 Vue 中将 `icon-custom-right` 中的 `right` 部分变成动态的，可以通过绑定动态属性的方式来实现。具体实现步骤如下：

1. 在 Vue 组件中，定义一个名为 `direction` 的属性，用来存储方向的值。

2. 在 `icon-custom-right` 元素上，通过 `v-bind` 指令动态绑定 `data-direction` 属性为 `direction` 的值。

3. 在 CSS 中，使用 `::before` 或 `::after` 伪元素来创建一个新的元素，并根据 `data-direction` 属性的值来设置箭头或其他符号的旋转角度。

下面是一个示例代码，用来在 Vue 中实现方向动态变化的效果：

HTML代码：

<icon-custom-right v-bind:data-direction="direction" color-primary />

Vue代码：

<template>
  <div>
    <button @click="changeDirection('right')">右</button>
    <button @click="changeDirection('left')">左</button>
    <button @click="changeDirection('up')">上</button>
    <button @click="changeDirection('down')">下</button>
    <icon-custom-right v-bind:data-direction="direction" color-primary />
  </div>
</template>

<script>
export default {
  data() {
    return {
      direction: 'right'
    }
  },
  methods: {
    changeDirection(dir) {
      this.direction = dir
    }
  }
}
</script>

<style>
icon-custom-right::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #000;
  transform: rotate(0deg);
}

icon-custom-right[data-direction="right"]::before {
  transform: rotate(0deg);
}

icon-custom-right[data-direction="left"]::before {
  transform: rotate(180deg);
}

icon-custom-right[data-direction="up"]::before {
  transform: rotate(-90deg);
}

icon-custom-right[data-direction="down"]::before {
  transform: rotate(90deg);
}
</style>

在上面的代码中，通过 `v-bind` 指令动态绑定 `data-direction` 属性为 `direction` 的值，根据 `direction` 的值来设置箭头或其他符号的旋转角度。通过 `changeDirection` 方法来改变 `direction` 属性的值，从而实现方向动态变化的效果。