はじめに

弊社ロゴってこんな感じなのですが、これを TypeScript から生成できるようにしたという話です。

当初は Adobe Illastlator で作成していた

会社設立当初は、Adobe Illastlator で作成していました。
文字は MaxWell というフリーフォントを使っています。

どうして TypeScript から生成できるようにしたのか

理由は1つで、Adobe Illastlator のファイルをなくしてしまったからです 😭。
生成した PNG 画像はあるので特に問題ないのですが、色違いとかサイズ違いを作りたくなったときに困るなと思って、色々調べていくうちに TypeScript というか Node.js から生成する方法を見つけました。
下記の text-to-svg というライブラリを使うと任意のテキストから SVG 画像を作成することができます。

最終的なコード

最終的なコードは以下のとおりです。
いったん SVG 画像を作った後、ホームページなどで使いやすいように PNG 画像に変換しています。

import GenerateLogos, { GenerationOptions } from 'text-to-svg'
import fs from 'fs'
import sharp from 'sharp'

function generateLogo(filename: string, override?: GenerationOptions) {
    const fontFilePath = 'font/maxwell.bold.ttf'
    const svgFilePath = `svg/${filename}.svg`
    const pngFilePath = `png/${filename}.png`

    const textToSVG = GenerateLogos.loadSync(fontFilePath);
    
    let textToSvgOptions: GenerationOptions = {
        x: 0, y: -10, fontSize: 144, anchor: 'left top', attributes: { fill: '#14216d', stroke: '#14216d' }
    }
    
    if (override) {
        textToSvgOptions = Object.assign({}, textToSvgOptions, override)
    }
    
    const svg = textToSVG.getSVG('yields', textToSvgOptions);
    
    if (fs.existsSync(svgFilePath)) {
        fs.unlinkSync(svgFilePath)
    }
    fs.writeFileSync(svgFilePath, svg)
    
    if (fs.existsSync(pngFilePath)) {
        fs.unlinkSync(pngFilePath)
    }
    
    sharp(svgFilePath).png().trim().extend({ background: 'transparent', top: 5, left: 5, right: 5, bottom: 5 }).toFile(pngFilePath).catch(result => {
        console.error({ result })
    })
}

generateLogo('yields_logo')
generateLogo('yields_logo_white', { attributes: { fill: '#ffffff', stroke: '#ffffff' } })

SVG から PNG の変換には、sharp というライブラリを使っています。
参考までに package.json も載せておきます。

{
  "private": true,
  "devDependencies": {
    "@types/node": "^20.11.16",
    "@types/text-to-svg": "^3.1.4",
    "sharp": "^0.33.2",
    "text-to-svg": "^3.1.5",
    "typescript": "^5.3.3"
  },
  "scripts": {
    "build": "ts-node generate-logos.ts"
  }
}

sharp はこちらです。

おわりに

テキストから画像を作る方法自体は珍しくないと思いますが、なかなかちょうどいい記事がなかったので、記事にしてみました。

ちなみに、Slack のカスタム絵文字を ChatGTP に作ってもらったという興味深い記事を見つけたのでリンクしておきます。

ではでは。