Лучший способ сделать систему SVG иконок?

Question

[antimodern]

Собственно, собрался навести порядок, и сделать нечто типо

<app-icon name="heart" />

Способов как это сделать уйма (я насчитал 7 штук). Остановился на 2 (с перспективой добавить анимацию и тд):

1. Тупо в лоб:

<template>
  <div>
    <svg v-if="name ==='heart'">
      ...
    </svg>
    <svg v-else-if="name ==='like'">
      ...
    </svg>
    ...
  </div>
</template>

ВОПРОС: будет ли дубликация объема кода загружаемого на клиент (используя стандартный стартер вебпак, например)? Т.е. один и тот же очень объемный компонент (скажем, в одном компоненте 200 иконок с v-if) используется много раз в приложении. Все будет заново загружатся, или вебпак как-то оптимизирует это?

2. Использовать спрайты: сделать один компонент-спрайт с символами, загружать его в корне проекта единоразово, и сделать компоннет Icon.vue в котором те же v-if только использующие use для спрайта.

3. Ваш вариант и почему так? (не надо мне кидать ссылку на Сару Драснер, мне этот способ не нравится)

Answer 1

[Сергей delphinpro]

По-моему, оптимальный вариант тот, что повсеместно используется — каждая иконка отдельным компонентом.

<app-icon-heart/>
<app-icon-like/>

Спрайты здесь вряд ли нужны. Код и так собирается в единый бандл.

Comments

[antimodern]

Этот вариант используется только если у тебя 10 иконок, а не 200.

[Сергей delphinpro]

antimodern, я с вами не соглашусь, но спорить лениво.
В любом случае правильным подходом будет расположение каждой иконки в отдельным файле. В качестве примера можете глянуть эту реализацию https://github.com/Justineo/vue-awesome

[antimodern]

Сергей delphinpro, в приведенной ссылке совершенно другой способ

[Сергей delphinpro]

antimodern, да. вам же не понравилось делать отдельные компоненты =)

[antimodern]

Сергей delphinpro,

Спрайты здесь вряд ли нужны. Код и так собирается в единый бандл.

Смысл спрайтов - в кешировании. Если я их загружу единоразово в App.vue, то потом буду только лишь обращаться к уже загруженным символам. Если сделать в компонентах как у вас - придется на каждый переход заново скачивать весь свг

[Сергей delphinpro]

antimodern, Вы не поняли.
Как в случае компонентов, так и в примере с font-awesome, иконки будут вставлятся в код инлайново. Сами иконки будут в общем бандле, никаких дополнительных загрузок.

IconHome.vue

template
  svg
    path d=1232,32,12,121

IconEmail.vue

template
  svg
    path d=1232,32,12,121

use

import IconHome from './IconHome';
import IconEmail from './IconEmail';

export default {
  components: {
    IconHome,
    IconEmail,
  }
}
<template>
  <div>
    <IconHome class=green>
    <IconEmail class=red>
  </div>
</template>
<style>
  .green { fill: green }
  .red { fill: red }
</style>

[antimodern]

Сергей delphinpro, я ж говорю этот вариант не подходит когда у тебя 200 иконок

[Сергей delphinpro]

antimodern, что ж так всё сложно...
Почему не подходит-то?
Вы все равно будете каждую иконку писать в отдельном файле.
При таком подходе у вас в билд попадут только подключенные иконки, т.е. реально используемые.
Если вы будете использовать code-splitting, они разлетятся по чанкам и ничего лишнего не загрузится.
В том примере, что выше привел, все иконки всегда попадают в бандл. Минус.
То что вы привели в пример с иф-элс - галимый говнокод. И опять же все иконки в бандле. Минус. Минус.
Символьный спрайт. Новая сущность - спрайт, который нужно собирать из отдельных иконок, потом встраивать в страницу. в принципе, если готовы мирится с этими неудобствами, можете так делать. С поправкой — там не нужны ифы. Просто подстановка переданного имени в конструкцию svg-use

[antimodern]

Сергей delphinpro, Галимый говнокод - это когда надо делать 200 компонентов-файлов, в которых единственное отличие - это сам свг код, а все остальное (пропсы, логика анимации, стили и тд) - одинаковое. 200 раз, Карл! Вы мне предлагаете 200 раз описать одни и те же пропсы и какой-нибудь enterAnimation метод! С в-ифами мы избавляемся от этого повторения 200 раз одного и того же (я уж молчу за 200 файлов). Пример с подстановкой внешнего файла свг не катит, потому как анимация будет невозможна!

Вы все равно будете каждую иконку писать в отдельном файле.

Так в том-то и дело что НЕТ. Вы точно вопрос поняли? Или сложно?

[Сергей delphinpro]

antimodern, Кто-то отменил миксины? =)

[Сергей delphinpro]

antimodern,
подкину вам еще идеек.
svg-inline-loader
svg-sprite-loader

[antimodern]

Сергей delphinpro, хм, насчет миксинов забыл, а вебпак лоадеры надо посмотреть. Там кажется можно настроить смесь - нечто вроде спрайтов, но без жести Shadow DOM (т.е. инлайнит внешние фацлы) и там же поддержка анимации.

Answer 2

[nvdfxx]

<template>
    <svg :src=`../assets/icons/${name}.svg`></svg>
</template>

<script>
export default {
    props: {
        name: {
            type: String,
            required: true
        }
    }
}
</script>

И вызывать этот компонент например так <v-icon name="like"/>, вебпак, я думаю, с такой задачей вполне справится

Comments

[antimodern]

И какой в этом смысл? Чем это отличается от <img :src="assets/icons/${name}.svg />"? Анимация же невозможна в этом случае я полагаю (не пробовал)? Да и стилизация будет невозможна через динамические аттрибуты также. Зачем так делать. какой в этом смысл?)) Мы же получим некий обрезок инлайнового свг без всех его преимуществ, и в то же время убиваем преимущества вставки через тег img (кеширование). Итого: одни минусы и ниединого плюса.

Answer 3

[dest86]

svg-sprite-loader

Настраиваем лоадер

// vue.config.js
module.exports = {
   ...

    chainWebpack: config => {
      const Sprite = config.module.rule('svg-sprite')
    
      Sprite
        .test(/\.(svg)(\?.*)?$/)
        .include
         // указываем путь к папке с иконками что бы не было конфликтов(например со шрифтами)
          .add(path.resolve(__dirname,'src/assets/icons'))
        .end()                   
        .use('file-loader')
          .loader('file-loader')
          .options( {
            name: 'static/img/[name].[hash:8].[ext]'
          })              
        
      Sprite
        .use('file-loader')
        .loader('svg-sprite-loader')
  
    }
}

Создаем компонент для иконок

<template>
  <svg :class="className" xmlns="http://www.w3.org/2000/svg" :style="style" v-on="$listeners">
    <use :xlink:href="`#${name}`" xmlns:xlink="http://www.w3.org/1999/xlink"/>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',

  props: {
    name: {
      type: String,
      required: true
    },
    width: {
      type: Number,  
    },
    height: {
      type: Number,   
    }
  },
  mounted() {
    require(`@/assets/icons/${this.name}.svg`).default.url;
    
  },
  updated() {
    // у меня возникали проблемы с тем что иконки не всегда отображаются, поэтому продублировал запрос к иконке  
    require(`@/assets/icons/${this.name}.svg`).default.url;
  },
  computed: {

    className() {
      return 'svg-icon svg-icon--' + this.name;
    },
    style() {
      let style = {}
      if (this.width) {
        style.width = this.width+'px';
      }
      if (this.height) {
        style.height = this.height+'px';
      }
      return style;       
    }

  }
};
</script>

<style>
  .svg-icon {
    fill: currentColor;
    height: 24px;
    width: 24px;
    stroke: none;
  }
</style>

вызов иконки
<svgicon :name="`logo`" />

Соответственно компонент svgicon либо подключаем в каждом компоненте или глобально

//main.js
//....
import SvgIcon from '@/components/SvgIcon

//....
Vue.use(SvgIcon, {
  tagName: 'svgicon'
})