preview-stroke.mjs 1.8 KB

123456789101112131415161718192021222324252627282930313233343536
  1. import fs from 'fs'
  2. import { createScreenshot } from './helpers.mjs'
  3. const icon = 'ghost',
  4. strokes = ['.25', '.5', '.75', '1', '1.25', '1.5', '1.75', '2', '2.25', '2.5', '2.25'],
  5. svgFileContent = fs.readFileSync(`icons/${icon}.svg`).toString(),
  6. padding = 16,
  7. paddingOuter = 3,
  8. iconSize = 56,
  9. width = 830,
  10. height = iconSize + paddingOuter * 2
  11. let svgContentSymbols = '',
  12. svgContentIcons = '',
  13. x = paddingOuter
  14. strokes.forEach(function(stroke) {
  15. let svgFileContentStroked = svgFileContent.replace('<svg xmlns="http://www.w3.org/2000/svg"', `<symbol id="icon-${stroke}"`)
  16. .replace(' width="24" height="24"', '')
  17. .replace(' stroke-width="2"', ` stroke-width="${stroke}"`)
  18. .replace('</svg>', '</symbol>')
  19. .replace(/\n\s+/g, '')
  20. svgContentSymbols += `\t${svgFileContentStroked}\n`
  21. svgContentIcons += `\t<use xlink:href="#icon-${stroke}" x="${x}" y="${paddingOuter}" width="${iconSize}" height="${iconSize}" />\n`
  22. x += padding + iconSize
  23. })
  24. const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #354052"><rect x="0" y="0" width="${width}" height="${height}" fill="#fff"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`
  25. const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" style="color: #ffffff"><rect x="0" y="0" width="${width}" height="${height}" fill="transparent"></rect>\n${svgContentSymbols}\n${svgContentIcons}\n</svg>`
  26. fs.writeFileSync('.github/icons-stroke.svg', svgContent)
  27. fs.writeFileSync('.github/icons-stroke-dark.svg', svgContentDark)
  28. await createScreenshot('.github/icons-stroke.svg')
  29. await createScreenshot('.github/icons-stroke-dark.svg')