wkulhanek/bonob
1
0
Fork 0
mirror of https://github.com/wkulhanek/bonob.git synced 2025-12-21 17:33:29 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Icons for genres with backgrounds, text, and ability to specify text color and font family (#34)

Browse Source
This commit is contained in:
Simon J
2021-08-27 18:14:09 +10:00
committed by GitHub
parent d1f00f549c
commit 29493e090a
38 changed files with 902 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
web/icons/index.html
View File

@@ -28,6 +28,185 @@
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-12.5c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 5.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path>
</svg>
</div>
hack 4<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" data-testid="icon">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<text style="fill:red;">Several lines:
<tspan >First line.</tspan>
<tspan >Second line.</tspan>
</text>
</svg>
</div>
hack 5<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- <rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" /> -->
<g font-face="sans-serif" font-size="12">
<text x="0%" y="45%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar1]]></text>
<text x="0%" y="90%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar2]]></text>
</g>
</svg>
</div>
hack 5 (3 lines)<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- <rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" /> -->
<g font-face="sans-serif" font-size="8">
<text x="0%" y="30%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar1]]></text>
<text x="0%" y="60%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar2]]></text>
<text x="0%" y="90%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar3]]></text>
</g>
</svg>
</div>
hack 5 (4 lines)<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- <rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" /> -->
<g font-face="sans-serif" font-size="6">
<text x="0%" y="22%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar1]]></text>
<text x="0%" y="45%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar2]]></text>
<text x="0%" y="67%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar3]]></text>
<text x="0%" y="90%" textLength="24" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar4]]></text>
</g>
</svg>
</div>
hack 5 (4 lines with viewBox enlarge)<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- <rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" /> -->
<g font-face="sans-serif" font-size="5">
<text x="2" y="7" textLength="20" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar1]]></text>
<text x="2" y="12" textLength="20" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar2]]></text>
<text x="2" y="17" textLength="20" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar3]]></text>
<text x="2" y="22" textLength="20" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar4]]></text>
</g>
</svg>
</div>
hack 6a (4 lines with viewBox enlarge)<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- <rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" /> -->
<g font-face="sans-serif" font-size="20">
<text x="10" y="30" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar1]]></text>
<text x="10" y="50" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar2]]></text>
<text x="10" y="70" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar3]]></text>
<text x="10" y="90" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[foobar4]]></text>
</g>
</svg>
</div>
hack 6b 1 line<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<g font-family="helvetica" font-size="50" font-weight="bold">
<text x="10" y="60" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[psy]]></text>
</g>
</svg>
</div>
hack 6b 1 line %<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<g font-family="helvetica" font-size="50" font-weight="bold">
<text x="10" y="60" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[psy]]></text>
</g>
</svg>
</div>
hack 6b 2 lines<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<g font-family="helvetica" font-size="30" font-weight="bold">
<text x="10" y="40" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[psy]]></text>
<text x="10" y="80" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[trance]]></text>
</g>
</svg>
</div>
hack 6b2<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<g font-family="helvetica" font-size="30" font-weight="bold">
<text x="10" y="40" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[alt]]></text>
<text x="10" y="80" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[pop]]></text>
</g>
</svg>
</div>
hack 6b3<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<g font-family="helvetica" font-size="30" font-weight="bold">
<text x="10" y="40" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[oz]]></text>
<text x="10" y="80" textLength="80" lengthAdjust="spacingAndGlyphs"><![CDATA[rock]]></text>
</g>
</svg>
</div>
hack 6c (3 lines with viewBox enlarge)<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<g font-family="helvetica" font-size="16" font-weight="bold" style="fill:pink">
<text x="20" y="26" textLength="60" lengthAdjust="spacingAndGlyphs"><![CDATA[oz]]></text>
<text x="20" y="52" textLength="60" lengthAdjust="spacingAndGlyphs"><![CDATA[hip]]></text>
<text x="20" y="78" textLength="60" lengthAdjust="spacingAndGlyphs"><![CDATA[hop]]></text>
</g>
</svg>
</div>
hack 6c with an embedded svg (1 lines with viewBox enlarge)<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<svg x="20" y="20" width="60" height="60" viewBox="0 0 100 100">
<g font-family="helvetica" font-size="20" font-weight="bold">
<text x="0" y="100" textLength="100" lengthAdjust="spacingAndGlyphs"><![CDATA[oz]]></text>
</g>
</svg>
</svg>
</div>
hack 6c with an embedded svg (3 lines with viewBox enlarge)<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<svg x="10" y="10" width="80" height="80" viewBox="0 0 100 100">
<g font-family="helvetica" font-size="16" font-weight="bold">
<text x="0" y="26" textLength="100" lengthAdjust="spacingAndGlyphs"><![CDATA[oz]]></text>
<text x="0" y="52" textLength="100" lengthAdjust="spacingAndGlyphs"><![CDATA[hip]]></text>
<text x="0" y="78" textLength="100" lengthAdjust="spacingAndGlyphs"><![CDATA[hop]]></text>
</g>
</svg>
</svg>
</div>
hack 6c% (3 lines with viewBox enlarge)<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" />
<g font-family="helvetica" font-size="16" font-weight="bold">
<text x="10%" y="26%" textLength="80%" lengthAdjust="spacingAndGlyphs"><![CDATA[oz]]></text>
<text x="10%" y="52%" textLength="80%" lengthAdjust="spacingAndGlyphs"><![CDATA[hip]]></text>
<text x="10%" y="78%" textLength="80%" lengthAdjust="spacingAndGlyphs"><![CDATA[hop]]></text>
</g>
</svg>
</div>
hack 6<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- <rect x="0" y="0" width="100%" height="100%" style="fill:lightgrey" /> -->
<g font-face="sans-serif" font-size="10">
<text y="100%">
<tspan x="0" y="12" textLength="24" lengthAdjust="spacingAndGlyphs">First line.</tspan>
<tspan x="0" y="24" textLength="24" lengthAdjust="spacingAndGlyphs">Second line.</tspan>
</text>
</g>
</svg>
</div>
mushroom<br>
<div style="width:100px; height:100px; border: 1px; border-style: solid;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="none" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" d="M2.5,8c0,3.038,2.462,0.5,5.5,0.5s5.5,2.538,5.5-0.5S11.038,2.5,8,2.5S2.5,4.962,2.5,8z"/>
<path fill="none" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" d="M9.152,8.625C9.369,10.951,9.5,12.135,9.5,12.5c0,0.828-0.672,1-1.5,1s-1.5-0.172-1.5-1c0-0.365,0.131-1.549,0.348-3.875"/>
</svg>
</div>
</body>
</html>