Как бы вы упростили компонент?

Question

[SimBioT19]

<template>
    <div :class="className">
        <svg class="icon-svg">
            <use :xlink:href="`#icon-${icon}`"></use>
        </svg>
    </div>
</template>

<script>
export default {
  name: 'VIcon',
  props: {
    icon: {
      type: String,
      required: false,
    },
    size: {
      type: String,
      required: false,
    },
  },
  computed: {
    className() {
      const classList = ['icon'];

      if (this.size) {
        classList.push(`icon--${this.size}`);
      }
      return classList;
    },
  },
};
</script>

Может есть варианты сделать элементарный компонент ещё проще?

Comments

[Алексей Ярков]

Убрал бы обёртку из дива

[Сергей delphinpro]

Убрать required: false/ Это значение по дефолту.
Ну className в одну строку упаковать

return this.size ? `icon--${this.size}` : '';

<div class="icon" :class="className">

А больше там нечего упрощать. Только визуально уменьшить количество кода

<template>
    <div class="icon" :class="className">
        <svg class="icon-svg">
            <use :xlink:href="`#icon-${icon}`"></use>
        </svg>
    </div>
</template>

<script>
export default {
  name: 'VIcon',
  props: {
    icon: String,
    size: String,
  },
  computed: {
    className() { return this.size ? `icon--${this.size}` : ''; },
  },
};
</script>

[Владимир Боруткин]

Зачем?

[SimBioT19]

Сергей delphinpro,

className() { return this.size ? `icon--${this.size}` : ''; },

на мой взгляд не очень читается

[Михаил]

Кстати раньше тоже так вставлял иконки, но в итоге понял что лучше напрямую через import https://stackoverflow.com/questions/44695560/how-c...

[Сергей delphinpro]

SimBioT19, у вас наверное личная неприязнь в тернарному оператору. Прекрасно читается.

[Сергей delphinpro]

SimBioT19, Можете написать просто return 'icon--'+this.size
но тогда в разметке будет появляться обрубок icon--.
В принципе, ничего страшного, если вы не перфекционист.