Bytesize Iconsの使い方｜検索アイコンの線幅を比べる

今回の仕上がり：同じ形の線を変える

Bytesize Iconsは線で描かれたSVGアイコン集です。公式リポジトリの検索アイコンを保存し、32pxと64pxで並べました。自作例の「線幅」を変えると、同じ円と斜線のまま、線の太さを比較できます。

この作例は見え方を比べるためのものです。アイコンを押して検索する機能はありません。実際の検索ボタンへ使うなら、「検索」の文字などで操作内容も伝えてください。

SVGを保存して表示する

1. 公式リポジトリのGrab-n-Goにある検索アイコンのSVGを確認します。
2. SVGをsearch.svgとして保存します。今回の図形はcircleとpathで、元の形は変更していません。
3. 自作HTMLに同じSVGを置き、widthとheightを32・64へ設定します。
4. 下の例で線幅を1、2、3へ変え、サイズごとの見え方を比べます。表示の変化と「線幅」の値が一致すれば確認できています。

stroke="currentColor"
stroke-width="2"
viewBox="0 0 32 32"

線幅と表示サイズは別の値

stroke-widthはSVGの座標に対する値です。同じ2を指定しても、64pxで表示すると32pxより画面上の線は太くなります。今回は拡大に合わせて線も太くなる設定です。色はcurrentColorで、直書きしたSVGが周囲の文字色を使います。

作者の公式ページとMITライセンス全文を確認しました。著作権は2016 Dan Klammerで、コピーや相当部分に著作権・許諾表示を残す条件があります。商用利用や改変も許可されますが、表示条件は省けません。

ZIPにはSVGとMIT全文、自作HTMLを含めています。自作HTML・CSS・JavaScriptはCC0、アイコンはMITです。今回は検索アイコン1種類の表示を確認しており、全アイコンやスプライト方式は試していません。作者の紹介、currentColorの比較記事も参照できます。