Динамическое изменение цвета svg иконки не работает во vue.js

Question

Уже 4 час бьюсь над одной иконкой. Всё уже перепробовал ничего не работает.

Мои попытки заставить это работать:

Подключение svg через тег img: <img src="path to icon">. В самом файле svg указываю fill="currentColor". Обращаюсь в css к img и пытаюсь поменять цвет с помощью color: red;. Ничего не работает

Использую тег object для вставки svg:

// без require() vue.js не обрабатывает этот путь и картинка не вставляется
<object :data="require('path to icon')" type="image/svg+xml"></object>
/* с require() появляется другая проблема, vue.js не понимает,
что это картинка и отправляют её как документ (в headers)*/

Svg вставляется вот так (сорри за скрин, но я не знаю как это объяснить и написать):

Браузер получает от сервера заголовок о том, что это не картинка а документ и вставляет её как документ. Из-за этого я не могу обратиться в css к svg. Любые попытки применить к стили используя селектор svg игнорируются.

Есть во vue.js нормальный способ изменять svg с помощью css и не вырвать волосы себе на голове? На крайний случай остаётся просто скопировать svg код и вставить в документ, но я очень не хочу этого делать

Update: мне нужно чтобы vue-loader понимал, что с помощью require я подключаю картинку а не документ. Думаю это решит мою проблему, но как это сделать?

Answer 1

Вот как у меня на проекте подключены иконки в svg Icon.vue

        <script>
        import choices from './choices';
        
        export default {
          props: {
            name: { type: String },
            fill: { type: String, default: '' },
           },
          computed: {
            selectedIcon() {
              return this.chooseIcon(this.name);
            },
          },
          methods: {
             chooseIcon(name) {
               return choices[name] || null;
           }
         }
        };
        </script>
        
        <template>
          <component :is="selectedIcon" v-bind="$props"/>
        </template>

choices.js

    import facebook from './Icons/Social/IconFacebook';
    const choices = {
        facebook 
    }
    export default choices;

IconFacebook.vue

<script>
export default {
  name: 'IconFacebook',
    props: {
      fill: { type: String, default: 'blue' },
     },
};
</script>

<template>
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 0C8.05263 0 0 8.05263 0 18C0 27.9474 8.05263 36 18 36C27.9474 36 36 27.9474 36 18C36 8.05263 27.9474 0 18 0ZM26.7632 25.5789C26.7632 26.1 26.5263 26.4789 25.9579 26.4789H21.5526V19.8474H23.8263L24.1579 17.0053H21.5526V15.5368C21.5526 14.7789 21.7421 14.1632 22.8316 14.1632H24.3947V11.8895C23.9211 11.8421 23.1632 11.7947 22.2158 11.7947C20.2263 11.7947 18.7105 13.0263 18.7105 15.2526V17.0053H16.3421V19.8474H18.7105V26.4789H10.5158C9.99474 26.4789 9.71053 26.1474 9.71053 25.5789V10.0895C9.71053 9.56842 9.99474 8.90526 10.5158 8.90526H26.0053C26.5263 8.90526 26.8105 9.56842 26.8105 10.0895V25.5789H26.7632Z" :fill="fill"/>
    </svg>
</template>

Использование

<Icon name="facebook"/>

БЛОГ НА HUSL

Динамическое изменение цвета svg иконки не работает во vue.js

Ответы (1 шт):