Riot.js にSVGをloaderで喰わせる方法

良い感じのloaderがなかった

Reactで組んでいたときは何も考えずに react-svg-loader を使ってたんだけど、Riot.jsでも同じ事をしたくて、npmで探したんだけど良きものが無かった。小一時間悩んだけど、解決したのでメモ書き。loaderのお話なのでもちろんwebpackです。あとbabel。

結論 svg-inline-loader を使った

webpack.configにこの svg-inline-loader 追加して、こう指定してやればエスケープされていないSVGが入る。かんたんね。

raw-svg-logo.tag

import svg from 'logo.svg'

<raw-svg-logo>
  this.root.innerHTML = svg
</raw-svg-logo>

React でいう dangerouslySetInnerHTML

これに相当するディレクティブがRiot.jsにはないんだけれども、公式では以下の方法が解説されていて、要するにこれと同じ扱いがSVGでも出来たという訳です。

Riotのテンプレート変数は、HTML形式を含まないテキストのみ表示可能です。しかし、そのためのカスタムタグを作成することはできます。例えば、このようなタグを定義しておけば、他のタグの中から利用することができます。

raw.tag

<raw>
  <span></span>
  this.root.innerHTML = opts.content
</raw>

my-tag.tag

<my-tag>
  <p>Here is some raw content: <raw content="{ html }"/> </p>
  this.html = 'Hello, <strong>world!</strong>'
</my-tag>

余談だけど、上の指定だとコンソールでソース見た時に、タグ要素に文字列がガッツリ入っていて、見た目が悪い。少量のテキストならあまり気にならないけど、ブログの記事とかをぶっこみたい場合はかなり辛い。そんな時は以下の様にObjectで優しく包み込んであげれば問題ない。

raw.tag

<raw>
  <span></span>
  this.root.innerHTML = opts.content.html
</raw>

my-tag.tag

<my-tag>
  <p>Here is some raw content: <raw content="{ content }"/> </p>
  this.content = { html: 'Hello, <strong>world!</strong>' }
</my-tag>