1
0
mirror of https://github.com/nolanlawson/pinafore synced 2024-12-12 02:07:26 +01:00
Pinafore-Web-Client-Frontend/bin/build-svg.js
Nolan Lawson 880bc7a38a
perf: use a separate icons.svg file (#1067)
* perf: use a separate icons.svg file

This splits icons into inline and non-inline. The inline ones are high
priority; the rest go in an icons.svg file.

* create SvgIcon.html

* determine inlined svgs at build time
2019-03-02 19:02:06 -08:00

39 lines
1.3 KiB
JavaScript
Executable File

import svgs from './svgs'
import path from 'path'
import fs from 'fs'
import { promisify } from 'util'
import SVGO from 'svgo'
import $ from 'cheerio'
const svgo = new SVGO()
const readFile = promisify(fs.readFile)
const writeFile = promisify(fs.writeFile)
async function readSvg (svg) {
let filepath = path.join(__dirname, '../', svg.src)
let content = await readFile(filepath, 'utf8')
let optimized = (await svgo.optimize(content))
let $optimized = $(optimized.data)
let $path = $optimized.find('path').removeAttr('fill')
let $symbol = $('<symbol></symbol>')
.attr('id', svg.id)
.attr('viewBox', `0 0 ${optimized.info.width} ${optimized.info.height}`)
.append($path)
return $.xml($symbol)
}
export async function buildSvg () {
let inlineSvgs = svgs.filter(_ => _.inline)
let regularSvgs = svgs.filter(_ => !_.inline)
let inlineSvgStrings = (await Promise.all(inlineSvgs.map(readSvg))).join('')
let regularSvgStrings = (await Promise.all(regularSvgs.map(readSvg))).join('')
let inlineOutput = `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">${inlineSvgStrings}</svg>`
let regularOutput = `<svg xmlns="http://www.w3.org/2000/svg">${regularSvgStrings}</svg>`
await writeFile(path.resolve(__dirname, '../static/icons.svg'), regularOutput, 'utf8')
return inlineOutput
}