Атрибут класса перезаписан в компоненте Vue без рендеринга

Question

Я создал компонент Vue с базовым значком без рендеринга, который просто выводит все, что находится в его слоте, но с некоторыми дополнительными атрибутами, добавленными к компоненту с прорезями. Один из установленных мною атрибутов: class="icon" что позволяет мне хранить стили для всех иконок в одном месте.

Icon.vue

      <script>
import Vue from "vue";

export default {
  name: "u-icon",
  render(createElement) {
    const svg = this.$slots.default[0];
    const attrs = svg.data.attrs;

    attrs.xmlns = "http://www.w3.org/2000/svg";
    attrs.class = "icon";
    attrs["aria-hidden"] = "true";
    attrs.focusable = "false";
    attrs.role = "img";

    return this.$slots.default;
  },
};
</script>

<style>
.icon {
  // ...
}
</style>

Закрыть-Icon.vue

Тогда мне будет проще создавать множество различных компонентов значков, таких как этот компонент значка закрытия.

      <template>
  <u-icon>
    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <line x1="4" y1="4" x2="20" y2="20"></line>
      <line x1="4" y1="20" x2="20" y2="4"></line>
    </svg>
  </u-icon>
</template>

<script>
import icon from "~/icon.vue";
export default {
  name: "close-icon",
  components: {
    "u-icon": icon,
  },
};
</script>

Фактический результат

Проблема в том, когда я использую close-icon компонент и установите class вот так:

      <close-icon class="foo"/>

Визуализированный вывод не объединяет два класса "icon foo".

      <svg class="foo" ...>
  ...
</svg>

Ожидаемый результат

Как я могу гарантировать, что класс не будет перезаписан, а добавлен к нему, чтобы на выходе был следующий результат:

      <svg class="icon foo" ...>
  ...
</svg>

Если возможно, любые изменения, которые я вношу, должны быть внесены в Icon.vue и я бы не хотел вносить изменения в Close-Icon.vue так как есть большое количество других иконок.

Answer 1

а также styleпривязки не являются частью $attrs - source

Я не уверен, почему ваш код работает без classпривязка, но если вы хотите добавить / изменить классы существующего VNode (исходящие из слота по умолчанию), вы должны использовать svg.data.staticClass вместо того svg.data.attrs.class

Пример ниже даже обрабатывает случай, когда статический класс также помещается непосредственно в svg элемент внутри close-icon - рендеры <svg class="foo bar icon" ...