pre-compute the 3 most common icon styles on server init (#2856)
refs #2833 (comment)
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
22
lib/logos.js
22
lib/logos.js
@@ -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 }) {
|
||||
|
||||
@@ -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"')
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user