【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた

GWに私は何をしているのでしょうか。

前回に引き続き、SVGについて。

前回のやり方ではCSSに読み込むスプライト画像が出来ないのでどうしようかなあと調べていたら、またまた良いものを発見しました。

TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

postcss-inline-svg というライブラリです。

CSSそのものにSVGをインライン化するのを自動化してくれるライブラリ。神発見したと思った。って言っても、css inline svg npm で検索すれば直ぐ出てくるんだけども。

問題はPostCSSで作られているということです。Sassに慣れきってるのでPostCSS環境に合わせるの面倒・・・と思ったけれど、そこはnpm-scriptsの良いところ。これまでも、node-sassでcssに変換した後にautoprefixerを通していたので、さらにpostcss-inline-svg すれば良いだけでは・・・!?

と思って、package.jsonに

"svginline": "npx postcss *.css --use postcss-inline-svg -d ../ --no-map",

としたら出来ちゃった。IE11でも動作しちゃった、のでご報告したいと思います。npm-scriptsを使ってる前提です。

“【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた” の続きを読む