Console.logでSVGアイコンを表示する小ネタ

Console.logでSVGアイコンを表示する小ネタ

Web版のInstagramアプリを開発者ツールでふと覗いたら下の画像のような文章がconsoleに表示されていた。

console.logについて調べたら'%c'を付与することでCSSのスタイルがあてられることがわかった。もしかしたらbackground-imageで画像とかが表示できるのではと思い色々やった結果できた

コード

paddingで表示領域を広げ、表示領域にいっぱいにアイコンを表示するようにしています。
アイコンは変数として読み込む方法しか動作しませんでした。(自分の実行環境のせいかも？)

useEffect(() => {
    const svg = ` <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
  <style>
.rotate {
	animation: rotate 2s linear infinite both;
  transform-origin: center;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
   }
  100% {
    transform: rotate(360deg);
   }
}
</style>
  <rect width="16" height="16" x="4" y="4" stroke="#0A0A30" stroke-width="1.5" rx="2.075"/>
  <path stroke="#0A0A30" stroke-linecap="round" stroke-width="1.5" d="M12.021 12l2.325 2.325"/>
  <path class="rotate" stroke="#265BFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.021 12V6.84"/>
</svg>`

  console.log('%c ', 
    `background-image: url(data:image/svg+xml;base64,${btoa(svg)}); 
    padding: 50px;
    background-size: contain;
    background-position: center  center;
    background-repeat: no-repeat;
    background-color: white;
    `)
  console.log('https://www.potlabicons.com/')
}, [])

実行結果

使用したSVGアイコン

Potlab Icons