mirror of
https://github.com/spacebarchat/spacebarchat.git
synced 2024-09-19 17:01:47 +02:00
✨ icon generate script
This commit is contained in:
Flam3rboy
parent
a2c0b32b03
commit
b89b80c95a
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
145
assets/logo/generate.js
Normal file
145
assets/logo/generate.js
Normal file
@ -0,0 +1,145 @@
|
||||
const sizes = [16, 32, 64, 128, 256, 512, 1024, 2048];
|
||||
// const sizes = [1024];
|
||||
const formats = ["png", "jpg", "webp", "ico"];
|
||||
// const formats = ["png"];
|
||||
const files = ["icon.svg", "icon_fullsize.svg", "icon_round.svg"];
|
||||
// const files = ["icon.svg"];
|
||||
|
||||
const styles = {
|
||||
default: ``,
|
||||
dropshadow: [
|
||||
`#blob {
|
||||
filter: url(#dropshadow);
|
||||
}`,
|
||||
`<filter id="dropshadow" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||
<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>`,
|
||||
],
|
||||
inner_shadow: [
|
||||
`#blob {
|
||||
filter: url(#InnerShadow);
|
||||
}
|
||||
.eye {
|
||||
filter: url(#dropshadow);
|
||||
}`,
|
||||
`<filter id="dropshadow" x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"/>
|
||||
<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="InnerShadow" height="130%">
|
||||
<feOffset dx="0" dy="0" />
|
||||
<feGaussianBlur stdDeviation="10" result="blurOut"/>
|
||||
<feComposite in="SourceGraphic" in2="blurOut" operator="out" result="inverseOut"/>
|
||||
<feFlood flood-color="black" flood-opacity="1" result="color" />
|
||||
<feComposite in="color" in2="inverseOut" operator="in" result="shadow"/>
|
||||
<feComposite in="shadow" in2="SourceGraphic" operator="over" />
|
||||
</filter>`,
|
||||
],
|
||||
};
|
||||
|
||||
// 84,117,244
|
||||
// 143,64,245
|
||||
|
||||
const colors = {
|
||||
black: `#background {
|
||||
fill: black;
|
||||
}`,
|
||||
white: `
|
||||
.eye {
|
||||
fill: black;
|
||||
}
|
||||
#background {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
svg {
|
||||
background: black;
|
||||
}
|
||||
`,
|
||||
blurple: `#background {
|
||||
fill: #7289DA;
|
||||
}`,
|
||||
blue: [
|
||||
`#background {
|
||||
fill: url(#gradient);
|
||||
}`,
|
||||
`<linearGradient id="gradient" gradientTransform="rotate(90)">
|
||||
<stop offset="5%" stop-color="rgb(84,117,244)" />
|
||||
<stop offset="95%" stop-color="rgb(143,64,245)" />
|
||||
</linearGradient>`,
|
||||
],
|
||||
};
|
||||
|
||||
const { execSync } = require("child_process");
|
||||
const { readFileSync, writeFileSync } = require("fs");
|
||||
const path = require("path");
|
||||
const temp = path.join(__dirname, "temp.svg");
|
||||
|
||||
for (const file of files) {
|
||||
const name = file.split(".")[0];
|
||||
|
||||
for (const size of sizes) {
|
||||
for (const colorName in colors) {
|
||||
for (const styleName in styles) {
|
||||
for (const format of formats) {
|
||||
const input = path.join(__dirname, file);
|
||||
|
||||
const output = path.join(
|
||||
__dirname,
|
||||
"variants",
|
||||
`${name}_${size}_${colorName}_${styleName}.${format}`
|
||||
);
|
||||
var fileData = readFileSync(input, { encoding: "utf8" });
|
||||
|
||||
const cssEnd = fileData.indexOf(`</style>`);
|
||||
if (cssEnd === -1) continue;
|
||||
|
||||
const color = colors[colorName];
|
||||
const style = styles[styleName];
|
||||
|
||||
var cssStyle = "";
|
||||
var xmlStyle = "";
|
||||
|
||||
if (Array.isArray(style)) {
|
||||
cssStyle += style[0];
|
||||
xmlStyle += style[1];
|
||||
} else {
|
||||
cssStyle += style;
|
||||
}
|
||||
if (Array.isArray(color)) {
|
||||
cssStyle += color[0];
|
||||
xmlStyle += color[1];
|
||||
} else {
|
||||
cssStyle += color;
|
||||
}
|
||||
|
||||
fileData = fileData.slice(0, cssEnd) + cssStyle + fileData.slice(cssEnd);
|
||||
|
||||
const svgEnd = fileData.indexOf(`</svg>`);
|
||||
if (svgEnd === -1) continue;
|
||||
fileData = fileData.slice(0, svgEnd) + xmlStyle + fileData.slice(svgEnd);
|
||||
|
||||
writeFileSync(temp, fileData, {
|
||||
encoding: "utf8",
|
||||
});
|
||||
|
||||
execSync(
|
||||
`sharp -i ${temp} -o ${output} --density 100 --progressive true -q 100 --lossless resize ${size}`
|
||||
);
|
||||
console.log(`[File] written ${output}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1024 1024" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
#blob {
|
||||
fill: white;
|
||||
}
|
||||
</style>
|
||||
<g>
|
||||
<rect id="background" x="-1" y="1" class="st1" width="1025" height="1024.1" />
|
||||
<g id="background">
|
||||
<rect id="icon" x="-1" y="1" class="st1" width="1025" height="1024.1" />
|
||||
<path id="blob" d="M504.3,256c-62.6,0.5-123.1,10.3-180,28.1c-41.4,12.9-75.8,42.1-95.2,81c-36.4,73-59,154.1-64.5,239.9 c-0.8,13.4-1.3,26.8-1.3,40.4v0.5c0,31.6,17.2,60.9,44.7,76.2c20.8,11.6,42.3,22,64.5,31.2c35.8,14.8,77,4.2,101.1-26.2 c2-2.5,4-5,5.9-7.6c9.5-12.3,24.9-18.6,40.2-16.3c29.3,4.2,59.2,6.4,89.6,6.4c30.4,0,60.3-2.2,89.6-6.4 c15.4-2.2,30.7,4,40.2,16.3c2,2.5,3.9,5.1,5.9,7.6c24.1,30.4,65.4,41,101.1,26.2c22.2-9.2,43.7-19.6,64.5-31.2 c27.6-15.3,44.7-44.5,44.7-76.2v-0.5c0-13.6-0.4-27.1-1.3-40.4c-5.4-85.8-28.1-166.9-64.5-239.9c-19.4-38.9-53.9-68.1-95.2-81 c-57-17.8-117.4-27.6-180.1-28.1c-1.7,0-3.4,0-5.1,0C507.8,256,506.1,256,504.3,256" />
|
||||
<path id="righteye" d="M573.2,511.9c0,35.3,28.5,64,63.7,64c35.2,0,63.7-28.7,63.7-64c0-35.3-28.5-64-63.7-64 C601.7,447.9,573.2,476.6,573.2,511.9" />
|
||||
<path id="lefteye" d="M318.5,511.9c0,35.3,28.5,64,63.7,64c35.2,0,63.7-28.7,63.7-64c0-35.3-28.5-64-63.7-64 C347,447.9,318.5,476.6,318.5,511.9" />
|
||||
<path class="eye" id="righteye" d="M573.2,511.9c0,35.3,28.5,64,63.7,64c35.2,0,63.7-28.7,63.7-64c0-35.3-28.5-64-63.7-64 C601.7,447.9,573.2,476.6,573.2,511.9" />
|
||||
<path class="eye" id="lefteye" d="M318.5,511.9c0,35.3,28.5,64,63.7,64c35.2,0,63.7-28.7,63.7-64c0-35.3-28.5-64-63.7-64 C347,447.9,318.5,476.6,318.5,511.9" />
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -1,12 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 1080 780" xml:space="preserve">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 1080 780" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.eye {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
<g>
|
||||
<g id="background">
|
||||
<path id="blob" d="M532.1,4.6c-96.5,0.8-189.6,15.8-277.3,43.1C191.1,67.5,138,112.2,108.1,171.8 C52.1,283.6,17.2,407.9,8.8,539.4c-1.3,20.5-2,41.1-2,61.9v0.8c0,48.5,26.5,93.3,68.9,116.8c32.1,17.7,65.2,33.7,99.4,47.8 c55.1,22.7,118.6,6.4,155.8-40.2c3.1-3.8,6.1-7.7,9.1-11.6c14.6-18.9,38.3-28.5,62-25.1c45.1,6.5,91.1,9.8,138,9.8 c46.9,0,92.9-3.4,138-9.8c23.7-3.4,47.4,6.1,62,25.1c3,3.9,6,7.8,9.1,11.6c37.1,46.6,100.7,62.8,155.8,40.2 c34.2-14.1,67.3-30,99.4-47.8c42.4-23.5,68.9-68.3,68.9-116.8v-0.8c0-20.8-0.7-41.5-2-61.9c-8.4-131.5-43.2-255.8-99.3-367.6 c-29.9-59.6-83-104.3-146.7-124.1C737.5,20.4,644.4,5.4,547.9,4.6c-2.6,0-5.3,0-7.9,0C537.4,4.6,534.7,4.6,532.1,4.6" />
|
||||
<path class="eye" id="lefteye" d="M242.1,396.9c0,54.9,44.5,99.4,99.4,99.4c54.9,0,99.4-44.5,99.4-99.4c0-54.9-44.5-99.4-99.4-99.4 C286.5,297.6,242.1,342.1,242.1,396.9" />
|
||||
<path class="eye" id="righteye" d="M638.2,396.8c0,54.2,43.9,98.1,98.1,98.1c54.2,0,98.1-43.9,98.1-98.1c0-54.2-43.9-98.1-98.1-98.1 C682.1,298.8,638.2,342.7,638.2,396.8" />
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@ -5,15 +5,15 @@
|
||||
fill: white;
|
||||
}
|
||||
</style>
|
||||
<g>
|
||||
<path id="background" d="M727,1025H298C134.1,1025,0,890.9,0,727V299C0,135.1,134.1,1,298,1h429c163.9,0,298,134.1,298,298v428
|
||||
<g id="background">
|
||||
<path id="icon" d="M727,1025H298C134.1,1025,0,890.9,0,727V299C0,135.1,134.1,1,298,1h429c163.9,0,298,134.1,298,298v428
|
||||
C1025,890.9,890.9,1025,727,1025z" />
|
||||
<path id="blob" d="M504.3,256c-62.6,0.5-123.1,10.3-180,28.1c-41.4,12.9-75.8,42.1-95.2,81c-36.4,73-59,154.1-64.5,239.9
|
||||
c-0.8,13.4-1.3,26.8-1.3,40.4v0.5c0,31.6,17.2,60.9,44.7,76.2c20.8,11.6,42.3,22,64.5,31.2c35.8,14.8,77,4.2,101.1-26.2
|
||||
c2-2.5,4-5,5.9-7.6c9.5-12.3,24.9-18.6,40.2-16.3c29.3,4.2,59.2,6.4,89.6,6.4c30.4,0,60.3-2.2,89.6-6.4
|
||||
c15.4-2.2,30.7,4,40.2,16.3c2,2.5,3.9,5.1,5.9,7.6c24.1,30.4,65.4,41,101.1,26.2c22.2-9.2,43.7-19.6,64.5-31.2
|
||||
c27.6-15.3,44.7-44.5,44.7-76.2v-0.5c0-13.6-0.4-27.1-1.3-40.4c-5.4-85.8-28.1-166.9-64.5-239.9c-19.4-38.9-53.9-68.1-95.2-81
|
||||
c-57-17.8-117.4-27.6-180.1-28.1c-1.7,0-3.4,0-5.1,0C507.8,256,506.1,256,504.3,256" />
|
||||
c-0.8,13.4-1.3,26.8-1.3,40.4v0.5c0,31.6,17.2,60.9,44.7,76.2c20.8,11.6,42.3,22,64.5,31.2c35.8,14.8,77,4.2,101.1-26.2
|
||||
c2-2.5,4-5,5.9-7.6c9.5-12.3,24.9-18.6,40.2-16.3c29.3,4.2,59.2,6.4,89.6,6.4c30.4,0,60.3-2.2,89.6-6.4
|
||||
c15.4-2.2,30.7,4,40.2,16.3c2,2.5,3.9,5.1,5.9,7.6c24.1,30.4,65.4,41,101.1,26.2c22.2-9.2,43.7-19.6,64.5-31.2
|
||||
c27.6-15.3,44.7-44.5,44.7-76.2v-0.5c0-13.6-0.4-27.1-1.3-40.4c-5.4-85.8-28.1-166.9-64.5-239.9c-19.4-38.9-53.9-68.1-95.2-81
|
||||
c-57-17.8-117.4-27.6-180.1-28.1c-1.7,0-3.4,0-5.1,0C507.8,256,506.1,256,504.3,256" />
|
||||
|
||||
<path id="lefteye" class="eye" d="M318.5,511.9c0,35.3,28.5,64,63.7,64c35.2,0,63.7-28.7,63.7-64c0-35.3-28.5-64-63.7-64
|
||||
C347,447.9,318.5,476.6,318.5,511.9" />
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
0
assets/logo/variants/__TEMP
Normal file
0
assets/logo/variants/__TEMP
Normal file
Loading…
Reference in New Issue
Block a user