svg 形式のアイコンを Scrapbox のタイトル画像用に整えるブックマークレット

Scrapbox のタイトル画像

Scrapbox では、ページ内で最初に表示される画像が「タイトル画像」になる
- 一覧画面や関連リストで表示される
- アイコン記法でも表示される
画像のサイズによって、見切れてしまうことがある
良い感じに表示させようと思うと、サイズ調整が必要
- width:height = 5:4 が良さそう

lucide.dev のアイコン

lucide.dev にあるシンプルなアイコンが好き
Scrapbox のタイトル画像にも使いたいことがある
lucide.dev のアイコンは、svg 形式のデータも取得できる
svg 形式だったら、サイズや色を簡単に変更できそう
手作業でやると面倒なので、bookmarklet 化しよう

bookmarklet

javascript:(async () => {
    try {
        const clipboardContents = await navigator.clipboard.readText();
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(clipboardContents, "image/svg+xml");
        const svg = xmlDoc.getElementsByTagName('svg')[0];

        // Modifying the attributes
        svg.setAttribute('width', '30');
        svg.setAttribute('height', '24');
        svg.setAttribute('stroke', '#808080'); // grey

        // Serializing the modified SVG
        const serializer = new XMLSerializer();
        const modifiedSvgString = serializer.serializeToString(svg);

        // Creating a Blob from the SVG string
        const blob = new Blob([modifiedSvgString], {type: 'image/svg+xml'});
        const url = URL.createObjectURL(blob);

        // Creating a temporary link to trigger the download
        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = 'title.svg'; // Name of the file
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);

        // Revoking the Blob URL
        URL.revokeObjectURL(url);
    } catch (err) {
        alert('Error: ' + err);
    }
})();

上記のjavascriptを javascript-minifier でminify
bookmarkletとして登録する

javascript:(async()=>{try{let e=await navigator.clipboard.readText(),t=new DOMParser,r=t.parseFromString(e,"image/svg+xml"),i=r.getElementsByTagName("svg")[0];i.setAttribute("width","30"),i.setAttribute("height","24"),i.setAttribute("stroke","#808080");let a=new XMLSerializer,l=a.serializeToString(i),c=new Blob([l],{type:"image/svg+xml"}),o=URL.createObjectURL(c),s=document.createElement("a");s.href=o,s.download="title.svg",document.body.appendChild(s),s.click(),document.body.removeChild(s),URL.revokeObjectURL(o)}catch(d){alert("Error: "+d)}})();

使い方

lucide.dev でアイコンを探す
使いたいアイコンを見つけたらCopy SVG

先ほどの bookmarklet を起動すると、Scrapbox 用に整えた svg ファイルtitle.svgをダウンロードできる

Posted : 23.12.21