Webフロントエンドの記事ばっかでごめん。でも伝えたいこの思いアナタに。

◆結論

URL-encoder for SVGで変換した結果のReady for CSS欄のアレをいい感じに変数にぶち込んで使えばよろしい。

url-loaderとかの話が分かる人は、変数にurlを格納して使えばよろしい。

◆発端

  • ul要素配下のli要素について、リストマーカーにカスタムアイコンを使いたい。
  • ul要素のlist-style-imageプロパティに画像を設定してあげればいいらしい。
  • でも、ちんまいアイコンのためにリクエスト回数増やしたくないよね。
  • じゃあ、DataURIつかってSVGを定義してCSSで参照すればいいじゃない。
  • え？どこに定義すんの？死ぬの？

◆解決

ぼくA「CSS変数（CSS Variables）にぶち込めばいいじゃない。」

ぼくB「あっ、そっかぁ…」

ぼくB「こうかな」（SCSSでの記法）

$hoge: url("data:image/svg+xml, %3Csvg width='12px' height='12px' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='3' cy='3' r='3' fill='red'/%3E%3Ccircle cx='9' cy='3' r='3' fill='blue' /%3E%3Ccircle cx='3' cy='9' r='3' fill='blue' /%3E%3Ccircle cx='9' cy='9' r='3' fill='red' /%3E%3C/svg%3E");
ul {
  list-style-image: $hoge;
}

ぼくA「そうだよ」

◆手法

  1. SVGをエンコード
    ここで。
  2. 「Ready for CSS」欄のをコピる
  3. 変数宣言的にする
    ▼SCSSでの書き方

    $[変数名]: url("data:image/svg+xml, [変換結果のなんだかんだ]");

    ▼CSS（ゴミ）での書き方
    ↓これみて
    https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables

  4. 使う
    ▼SCSSでの書き方

    ul {
  list-style-image: $[変数名];
}
  5. 以上

background-imageにぶち込めば背景画像になるし、当たり前だけど一度定義したものは使いまわしが可能だ。

そして、使いまわさないんなら変数に入れる必要はない。そのままurl()を書いてしまってもいい。長いと見栄え悪くなるから外に出したいけど。

◆動確

ChromeでF12押してNetworkタブ開いてCtrl+F5押して確認したら一回だけの読み込みでアレしててマジもうヤダ最高かわいい…

◆いや、でも

ぼくA「CSSきったねぇ！（辛辣） 糞だ…（コーディング力が）」

ぼくB「狂いそう…！（静かなる怒り）」

url-loaderって知ってる？てかwebpackとか使ってる？使ってるならsvg-url-loaderも入れよう。
webpack使ってないなら諦めるアル。

svg-url-loader使えば、単に

$[変数名]: url("[ファイルパス]");

で解決する。

※configで「resolve.alias」してたんなら、そのエイリアス前に「~」入れてやるだけで使用可能。

◆結論

部屋掃除ってどうやってモチベーション発生させればいいのかわからん。