Vue designer が使えない

Question

<template>
  <v-btn height="3.5em" class="contentButton">
    <iconComment class="icon" />
    <span class="button-string">コメント</span>
  </v-btn>
</template>

<script>
import iconComment from '@/assets/svgs/icon_comment.svg'
export default {
  name: 'CommentButton',
  components: {
    iconComment
  }
}
</script>

<style scoped>
.contentButton {
  display: flex;
  padding: 10px;
  width: 100%;
  font-family: 'Noto Sans', sans-serif;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background: #fff;
  border: 1px solid #bdc3c7;
  box-sizing: border-box;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.icon {
  margin-right: 5%;
}
.button-string {
  width: 5em;
  font-size: 17px;
  text-align: center;
}
</style>

上記のコードでVue designerを起動したところ、真っ白なままプレビューが表示されないです。何が原因なのでしょうか。
Vueの環境構築は完了しています

Answer 1

scriptブロックのimport文で読み込んでiconCommentに代入しているファイルがsvgファイルになっています。iconCommentはVueコンポーネントとしてプログラミングされているようですので、おそらく以下のようにvueファイルを指定すれば、正しく処理されるのではないでしょうか。

import iconComment from "./components/iconComment.vue";

Comments

[Kota.Y]

変わりませんでした。。。