Nuxt.js（vue.js）でhtml-loaderを使ってSVGファイルをインラインで呼びだしたらscopedが使えなかったメモ

CSSでstrokeなどの色味を変えるためにSVGをHTMLのコードとしてhtml-loaderを使って下記のように呼び出しました。

<template>
  <div class="hoge">
    <span v-html="icon" class="icon" />
  </div>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      icon: require('!html-loader!sample.inline.svg'),
    };
  },
})
</script>
<style lang="scss" scoped>
.hoge {
  svg {
    width: 20px;
    height: 20px;
    stroke: #ccc;
  }
}
</style>

これでアイコンの色味が#cccになるだろうと思ったところ、スタイルが一向にあたりません・・・
なぜだと思いコードの中身を見たところ、html-loaderで呼び出したSVGにはscopedでつくはずのdata-v-hoge が付与されていないことが判明。

ひとまず下記のようにscopedつくつかないを分けて書くしかなさそうです。
html-loaderでもdata-v-hoge がつくようにできるのかはまだ調査しないと分からない状態なので、何か情報を持ってる方いたら教えていただけると助かります。

<style lang="scss" scoped>
.hoge {
～そのほかの設定～
}
</style>
<style lang="scss">
.hoge {
  svg {
    width: 20px;
    height: 20px;
    stroke: #ccc;
  }
}
</style>

html-loader以外にもSVGをコンポーネントとして呼び出せるものがあるみたいなので、試してみようかと思います。
https://github.com/visualfanatic/vue-svg-loader

【追記】
下記で試してみた内容投稿しました。
Nuxt.jsでvue-svg-loaderつかってインラインSVGを呼び出したら、SVGの中身が全然違うものになって困った件と暫定解決方法