• Vue Svg Sprite Webpack как настроить правильно?

    @ChoasEmptiness Автор вопроса
    Если кому интересно все решается достаточно просто:
    Фишка в том что svg может быть много чего: Fonts\Loaders\Icons
    для Fonts и Loaders я сделал обычный url-loader
    а для icons:
    {
            test: /icons\/(-?\w\/?){0,}\.svg(\?.*)?$/,
            use: [{
                loader: 'svg-sprite-loader',
                options: {
                  extract: true
                }
              },
              //'svgo-loader'
            ]
          },

    + Цепляем плагин в webpack
    далее нужно подцепить в компоненте объект с данными по svg
    import Vue from 'vue'
    import Component from 'vue-class-component'
    declare var require: any
    @Component({
        components: {
        },
        props: {
          src: {
            type: String,
            required: true
            },
          classIcon: {
            type: String,
            required: false,
            default: "nulled-icon"
          },
          width: {
            type: String,
            required: false
          },
          height: {
            type: String,
            required:false,
            //default: "15px"
          }
        }
    })
    
    class IconElement extends Vue {
      name: string = "IconElement"
      height?: string;
      width?: string;
      src: string;
      classIcon: string;
      icon: any;
      get styles() {
        let styles: any = {}
        if(this.height) {
          styles.height = this.height
        }
        if(this.width) {
          styles.width = this.width
        }
        return styles
      }
      created(){
        this.icon  = require(`@assets/icons/${this.src}.svg`).default
      }
    
    }
    export default IconElement

    и под конец сделать шаблон
    svg(v-once, :viewBox="icon.viewBox", :class="[classIcon]", :style="styles")
      use(:xlink:href="icon.url")

    при build будет готовый спрайт который цепляется один раз соответственно
    Ответ написан
    Комментировать
  • Как с помощью CSS выровнять текст слева и по центру относительно картинки?

    @Firsov36
    full-stack web developer
    Можно, например, с помощью flexbox

    Ответ написан
    Комментировать