Блог

У меня есть SVG, который я намерен импортировать как компонент VueComponent в свой компонент из каталога значков,

вот файл icons index.ts:

 import { VueComponent as Spinner } from './spinner.svg'

export { Spinner }
 

вот как я импортирую SVG-счетчик:

 import { Spinner } from '../assets/icons'

export default defineComponent({
  components: { Spinner },
  setup () {}
})
 

Я получаю сообщение об ошибке, в котором говорится, что запрошенный модуль не предоставляет экспорт с именем VueComponent, как показано ниже. Как мне решить эту проблему

Должен быть в состоянии сделать это с vue-svg-loader

Установите загрузчик

 npm i -D vue-svg-loader@beta 
 

создайте vue.config.js файл в проекте с:

 module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-loader-v16')
      .loader('vue-loader-v16')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};
 

MySvgComponent.js

 import MySvgFile from "../assets/mySvgFile.svg";
export { MySvgFile };
 

а затем использовать…

 <script>
import {MySvgFile} from "./components/MySvgComponent";

export default {
  name: "App",
  components: {
    MySvgFile
  }
};
</script>
 

Просто обратите внимание, что определения svg могут не работать

вы можете попробовать это определение, хотя

 declare module '*.svg' {
    import type { DefineComponent } from 'vue';
    const component: DefineComponent;
    export default component;
}
 

Другим решением является создание компонента Vue для каждого значка. Например, AddIcon.vue это значок со знаком . Содержимое файла:

 <template>
  <g>
    <rect
      id="Rectangle_1"
      data-name="Rectangle 1"
      width="100"
      height="22"
      rx="4"
      transform="translate(0 39)"
      fill="currentColor"
    />
    <rect
      id="Rectangle_2"
      data-name="Rectangle 2"
      width="100"
      height="22"
      rx="4"
      transform="translate(61) rotate(90)"
      fill="currentColor"
    />
  </g>
</template>
 

Затем вы можете импортировать значок в родительский компонент, как и любой компонент vue.
import AddIcon from "@/components/icons/AddIcon.vue"
затем зарегистрируйте значок внутри компонентов

 components: {
...
AddIcon,
...
}
 

И использовать его внутри шаблона родительского компонента, например:

 <template>
   <div>
     <svg>
       <add-icon />
     </svg>
   </div>
</template>