普段使いアイコン画像の生成方法のメモ書き
/
はじめに
この投稿は自分用のメモ書きなので、参考を利用することで説明をできるだけ省き、保存しておきたいコードなどをメモ書きすることに徹する。
普段使っているアイコン画像
Easing Gradients などの CSS ジェネレータで好きな色や形の CSS を取得し、HTML に反映させて、それを画像変換ライブラリなどを使って生成している。基本的に青系統の色が好き。ヱヴァンゲリヲン新劇場版:Q や初音ミクもこんな色。Top | Kawano Yudai では --color-miku: #00e1ee;
と CSS 変数を設定している。何色なのかわからないので、取り敢えず近い色を使用している初音ミクの名前を借りた。
HTML と CSS
<div class='border forNow' />
#target { display: inline-block; padding: 50px; opacity: .9;}
.border { width: 300px; height: 300px; border-radius: 30% 70% 59% 41% / 30% 26% 74% 70%;}
.forNow { background: linear-gradient(to top right, hsl(157.83, 100%, 45.1%) 0%, hsl(158.37, 100%, 44.88%) 9.1%, hsl(159.93, 100%, 44.27%) 16.8%, hsl(162.39, 100%, 43.3%) 23.5%, hsl(165.67, 100%, 42.03%) 29.2%, hsl(169.74, 100%, 40.48%) 34.4%, hsl(174.6, 100%, 38.69%) 39.1%, hsl(180.28, 100%, 36.88%) 43.6%, hsl(186.13, 100%, 38.5%) 48.2%, hsl(191.54, 100%, 40.03%) 53%, hsl(196.45, 100%, 41.43%) 58.3%, hsl(200.81, 100%, 42.65%) 64.3%, hsl(204.51, 100%, 43.66%) 71.3%, hsl(207.41, 100%, 44.43%) 79.4%, hsl(209.31, 100%, 44.92%) 88.9%, hsl(210, 100%, 45.1%) 100%);}
PNG や SVG として取得
今までは画像化ライブラリに tsayen/dom-to-image を使っていたが、当投稿中に bubkoo/html-to-image を見つけたのでこちらを使う。
npm create vite@latest gradient -- --template react-tsnpm i html-to-image
import React, { useCallback, useRef } from 'react'import { toSvg } from 'html-to-image';
import "./gradient.css"
const App: React.FC = () => { const ref = useRef<HTMLDivElement>(null)
function filter(node: any) { return (node.tagName !== 'i'); }
const handleClick = useCallback(() => { if (ref.current === null) return;
toSvg(ref.current, { filter }) .then((dataUrl) => { const link = document.createElement('a') link.download = 'gradient.svg' link.href = dataUrl link.click() }) .catch((err) => { console.log(err) }) }, [ref])
return ( <> <button onClick={handleClick}>Click me</button> <div id='target' ref={ref}> <div className='border forNow' /> </div> <div id='dest'></div> </> )}
export default App
toPng
を使うと、下の画像が得られる。
![gradient icon image](https://i.imgur.com/sSlooVx.png)
今まで書いてたコード
※だいぶ前に書いたもの。
import React from 'react'import domtoimage from 'dom-to-image'
const App: React.VFC = () => { const onClick = async (e: any) => { e.preventDefault() const node = currentTarget const dest = document.getElementById('dest')
try { const img = new Image() img.src = await domtoimage.toPng(node) dest?.appendChild(img) } catch (error) { console.log(error) } }
return ( <> <div id='target' onClick={onClick}> <div className='border forNow' /> </div> <div id='dest'></div> </> )}
export default App;