Skip to content

Commit ad44904

Browse files
vnphanquangvnphanquang
committed
enhance: correct logo and optimize svg paths
1 parent 96361c9 commit ad44904

6 files changed

Lines changed: 43 additions & 43 deletions

File tree

‎.changeset/cyan-mails-peel.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@vnphanquang/green-check': patch
3+
---
4+
5+
optimize svg paths

‎.changeset/lovely-shrimps-fix.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@vnphanquang/green-check': patch
3+
---
4+
5+
render logo correctly load (question mark when not passing green check)

‎index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@
3737
/>
3838
</green-check>
3939

40+
<p>Fallback SVG</p>
41+
<img
42+
src="fallback.svg"
43+
width="200"
44+
height="95"
45+
alt="fallback blank greencheck badge from The Green Web Foundation"
46+
/>
47+
4048
<script type="module">
4149
import { GreenCheck } from './src/index.js';
4250
customElements.define('green-check', GreenCheck);

‎public/fallback.svg‎

Lines changed: 1 addition & 25 deletions
Loading

‎src/template.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,18 @@
1919
--green-check-bg: linear-gradient(45deg, #06ff06 4%, #dffcdd 24%, #fff 32%);
2020
}
2121

22+
.green {
23+
display: none;
24+
}
25+
26+
:host([green]:not([green='false'])) .green {
27+
display: block;
28+
}
29+
30+
:host([green]:not([green='false'])) .unknown {
31+
display: none;
32+
}
33+
2234
* {
2335
box-sizing: border-box;
2436
}

‎src/template.html‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,21 @@
1212
part="icon"
1313
>
1414
<path
15-
d="M3.20752 17.285V17.6825C3.20752 24.7875 8.98752 30.565 16.09 30.565C23.1925 30.565 28.9725 24.785 28.9725 17.6825V17.285H3.20752Z"
16-
fill="white"
15+
class="green"
16+
d="M2.6 11.4l13 5.2m13-5.2-13 5.2M24.7 3.9 15.6 17.2M6.2 3.9l9.4 13.3m0-.6V0"
17+
stroke="#0F0"
18+
stroke-width="2"
1719
/>
1820
<path
19-
d="M2.75 17.05V17.46C2.75 24.7875 8.71 30.7475 16.0375 30.7475C23.365 30.7475 29.325 24.7875 29.325 17.46V17.05H2.75ZM15.6275 24.0925V29.8775C14.1 29.5375 12.2475 27.3775 11.1 24.0925H15.6275ZM10.8375 23.2725C10.365 21.675 10.0625 19.8525 10.03 17.87H15.6275V23.2725H10.8375ZM16.445 29.8725V24.0925H20.915C20.625 24.895 20.285 25.6625 19.895 26.38C18.8525 28.2925 17.5425 29.6 16.445 29.8725ZM16.445 23.2725V17.87H22.0425C22.0075 19.73 21.715 21.57 21.1925 23.2725H16.445ZM9.21 17.87C9.2425 19.805 9.53 21.635 9.9975 23.2725H5.0125C4.12822 21.6046 3.63655 19.7568 3.575 17.87H9.2125H9.21ZM5.485 24.0925H10.2525C11.085 26.585 12.325 28.565 13.6475 29.6975C10.2175 29.03 7.2875 26.9525 5.485 24.0925ZM18.37 29.7075C19.69 28.57 20.935 26.5725 21.7825 24.0925H26.5925C24.78 26.9675 21.825 29.05 18.3725 29.7075H18.37ZM27.0625 23.2725H22.04C22.525 21.62 22.825 19.785 22.8625 17.87H28.4975C28.4372 19.757 27.9454 21.605 27.06 23.2725H27.0625Z"
20-
fill="black"
21+
d="M8.8 16.9c0 7.6 3.7 13.8 6.8 13.8 2.9 0 6.8-6.3 6.8-13.8M15.6 30.7V16.9m12 6.5H3.4m26-6.5H1.8c0 7.5 6.2 13.8 13.8 13.8s13.8-6.3 13.8-13.8Z"
22+
stroke="#000"
23+
fill="#fff"
24+
/>
25+
<path
26+
class="unknown"
27+
d="M17.5 13v3h-3V13h3ZM12.6 2.2A4.6 4.6 0 0011 6h2.5a2.8 2.8 0 01.7-1.8 2.5 2.5 0 011.7-.8 1.9 1.9 0 011.8.8 2 2 0 01.4 1.3c0 .5-.2.9-.4 1.3a4.2 4.2 0 01-.8.7l-.7.6c-.7.6-1.2.8-1.5 1.6-.2.7-.3 1.5-.2 2.2h2.9c0-.4 0-1.3.1-1.5s.3-.5.6-.7l.7-.6a7.3 7.3 0 001.4-1.4 3.9 3.9 0 00.8-2.3A3.7 3.7 0 0019.7 2.5 4.7 4.7 0 0016 1 5.9 5.9 0 0012.7 2.1"
28+
fill="#C2C2C1"
2129
/>
22-
<!-- <path -->
23-
<!-- d="M18.7775 17.05L28.9025 13.3325L28.225 11.4875L18.92 14.905L25.58 5.9725L24.005 4.8L17.0725 14.0975V1.5H15.1075V14.2575L8.17753 4.805L6.59253 5.9675L13.1075 14.85L3.83253 11.4425L3.15503 13.2875L13.4 17.05H18.7775Z" -->
24-
<!-- fill="#00FF00" -->
25-
<!-- /> -->
26-
<g>
27-
<path
28-
fill="#C2C2C1"
29-
d="M17.75 13H14.75C14.6168 13 14.5 13.0503 14.4 13.1501C14.3 13.2502 14.25 13.3668 14.25 13.5001V16.5003C14.25 16.6337 14.3001 16.7504 14.4 16.8503C14.5 16.9501 14.6166 17.0003 14.75 17.0003H17.75C17.8832 17.0003 18.0002 16.9502 18.0998 16.8503C18.2001 16.7504 18.2502 16.6337 18.2502 16.5003V13.5001C18.2502 13.3668 18.2002 13.2502 18.0998 13.1501C18.0002 13.05 17.8832 13 17.75 13Z"
30-
/>
31-
<path
32-
fill="#C2C2C1"
33-
d="M21.7619 4.6954C21.4365 4.13334 21.016 3.65924 20.5001 3.27223C19.9845 2.88538 19.4048 2.57644 18.7621 2.34588C18.1194 2.1154 17.4806 2 16.8456 2C14.4333 2 12.5923 2.9896 11.3226 4.96884C11.2591 5.06552 11.2373 5.16966 11.2571 5.2813C11.277 5.39279 11.3385 5.48583 11.4416 5.56022L13.3938 6.95544C13.497 7.01485 13.5962 7.0446 13.6915 7.0446C13.8344 7.0446 13.9573 6.98499 14.0605 6.86595C14.6318 6.1964 15.0564 5.76858 15.3342 5.58246C15.6754 5.36676 16.1038 5.25894 16.6197 5.25894C17.1037 5.25894 17.5301 5.37801 17.8993 5.61593C18.2683 5.85407 18.4526 6.12939 18.4526 6.44189C18.4526 6.79145 18.3536 7.07431 18.1551 7.2901C17.9568 7.50581 17.6234 7.71405 17.1551 7.91501C16.5363 8.1754 15.9686 8.5791 15.4531 9.12599C14.9371 9.67292 14.6793 10.2551 14.6793 10.8727V11.3749C14.6793 11.5164 14.7208 11.6558 14.8042 11.7935C14.8876 11.9312 14.9887 12 15.1078 12H17.9647C18.0916 12 18.2026 11.9425 18.2979 11.8267C18.393 11.7117 18.4408 11.5908 18.4408 11.4645C18.4408 11.2785 18.5499 11.029 18.7679 10.7167C18.9862 10.4042 19.2579 10.1621 19.5835 9.99093C19.8928 9.82729 20.1347 9.6954 20.3094 9.59482C20.4844 9.49451 20.7123 9.33232 20.9941 9.10926C21.2758 8.88597 21.4941 8.66459 21.6486 8.44517C21.8034 8.22571 21.9424 7.94105 22.0654 7.59126C22.1886 7.24159 22.25 6.8658 22.25 6.46406C22.2499 5.84649 22.0871 5.25687 21.7619 4.6954Z"
34-
/>
35-
</g>
3630
</svg>
3731
</header>
3832

0 commit comments

Comments
 (0)
⚡