インラインSVGを出してくれるショートコード

SVGをインライン化出来たので、記事内とかでも使いやすいようにショートコード化してみました。

ひねりも何もありませんが、これでlogo.svgていうファイル名なら、

[svg]logo[/svg]

と書くと出力してくれます。

phpの中なら

echo do_shortcode( '[svg]logo[/svg]' );

で。

適切なwidthとheightをCSSで指定するのを忘れずに。

※ 記事内でSVGを使うケースがあるのか?という人には必要ないコードです。
SVGスプライトをnpm-scriptsで作ってみるを前提にしています。

【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でもインライン化してみた” の続きを読む

SVGスプライトをnpm-scriptsで作ってみる

GWの中日、如何お過ごしでしょうか。仕事をしなきゃなんだけど、これっぽっちも気力が沸いてこない私はお勉強タイムに充てることにしました。

ターゲットはSVG。

ココの処ずっと、あーSVGに移行しなきゃなーと思いつつ、gulpか・・・という気持ちになって中々腰が上がらなかったのですが、gulpに出来ることがnpm-scriptsに出来ないはずが無いと思って調べてみました。

結果、凄い分かりやすいページを発見!これをいわゆるSVGスプライトと言っていいかは謎ですが。

Workflow for creating SVG sprites with NPM scripts – Oleg Varaksin – Medium

で、ほぼまるっとコレを参照しつつ、パスとか書き出し方をコソコソ自分好みに変えただけなのですが色々学べたのでメモしておきます。 “SVGスプライトをnpm-scriptsで作ってみる” の続きを読む