pre-compute the 3 most common icon styles on server init (#2856)

refs #2833 (comment)
This commit is contained in:
chris48s
2019-01-23 21:41:10 +00:00
committed by Paul Melnikow
parent eaa64a8dab
commit 7e473fe72c
3 changed files with 25 additions and 15 deletions

View File

@@ -10,9 +10,15 @@ function loadSimpleIcons() {
simpleIcons[k] = simpleIcons[key]
delete simpleIcons[key]
}
simpleIcons[k].base64 = svg2base64(
simpleIcons[k].svg.replace('<svg', `<svg fill="#${simpleIcons[k].hex}"`)
)
simpleIcons[k].base64 = {
default: svg2base64(
simpleIcons[k].svg.replace('<svg', `<svg fill="#${simpleIcons[k].hex}"`)
),
light: svg2base64(
simpleIcons[k].svg.replace('<svg', `<svg fill="whitesmoke"`)
),
dark: svg2base64(simpleIcons[k].svg.replace('<svg', `<svg fill="#333"`)),
}
})
return simpleIcons
}

View File

@@ -69,15 +69,15 @@ function hexToRgb(hex) {
}
}
function getSimpleIconColor({ icon, style }) {
function getSimpleIconStyle({ icon, style }) {
const { hex } = icon
if (style !== 'social' && brightness(hexToRgb(hex)) <= 0.4) {
return 'whitesmoke'
return 'light'
}
if (style === 'social' && brightness(hexToRgb(hex)) >= 0.6) {
return '#333'
return 'dark'
}
return hex
return 'default'
}
function getSimpleIcon({ name, color, style }) {
@@ -87,11 +87,15 @@ function getSimpleIcon({ name, color, style }) {
return undefined
}
const { svg } = simpleIcons[key]
const svgColor =
toSvgColor(color) ||
toSvgColor(getSimpleIconColor({ icon: simpleIcons[key], style }))
return svg2base64(svg.replace('<svg', `<svg fill="${svgColor}"`))
const svgColor = toSvgColor(color)
if (svgColor) {
return svg2base64(
simpleIcons[key].svg.replace('<svg', `<svg fill="${svgColor}"`)
)
} else {
const iconStyle = getSimpleIconStyle({ icon: simpleIcons[key], style })
return simpleIcons[key].base64[iconStyle]
}
}
function prepareNamedLogo({ name, color, style }) {

View File

@@ -39,7 +39,7 @@ describe('Logo helpers', function() {
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="#f7df1e"')
expect(decodedLogo).to.contain('fill="#F7DF1E"')
})
it('recolors logo if light logo on light background', function() {
const logo = prepareNamedLogo({ name: 'javascript', style: 'social' })
@@ -73,7 +73,7 @@ describe('Logo helpers', function() {
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="#00aff0"')
expect(decodedLogo).to.contain('fill="#00AFF0"')
})
it('preserves color if medium logo on light background', function() {
const logo = prepareNamedLogo({ name: 'skype', style: 'social' })
@@ -81,7 +81,7 @@ describe('Logo helpers', function() {
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="#00aff0"')
expect(decodedLogo).to.contain('fill="#00AFF0"')
})
})