feat: new logo (symbol + logotype) (#68)

ForkbombEu · Mar 15, 2024 · 7d6bffd · 7d6bffd
1 parent 9893b11
commit 7d6bffd
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 97 deletions.
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
@@ -18,11 +18,13 @@
 ### Used by
 
  - [d-credential-card](../credential-card)
+ - [d-logo](../logo)
 
 ### Graph
 ```mermaid
 graph TD;
   d-credential-card --> d-heading
+  d-logo --> d-heading
   style d-heading fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/src/components/logo/d-logo.tsx b/src/components/logo/d-logo.tsx
@@ -9,53 +9,26 @@ export class DLogo {
   render() {
     return (
       <Host>
-        <svg width="39" height="42" viewBox="0 0 39 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M10.4698 13.023V8.27368L28.234 8.3645V16.2143C28.2203 16.184 28.2049 16.1519 28.1895 16.1216C26.9348 13.6089 25.146 11.7142 23.0423 10.5834C21.067 9.52023 18.8144 9.13204 16.4659 9.53628C15.4081 9.71792 14.4187 10.0723 13.4892 10.5834C12.3989 11.1853 11.3941 12.0044 10.4698 13.023ZM28.234 26.2134V34.795H22.474C22.4929 34.7736 22.51 34.747 22.5305 34.7345C22.9105 34.5083 23.068 34.1183 23.0526 33.6251C23.0372 33.1318 22.7976 32.8362 22.4296 32.6794C22.3457 32.6438 22.2601 32.6136 22.1762 32.5815C21.4265 32.2877 20.7093 31.9102 20.0314 31.4365C20.0263 31.4329 20.0212 31.4293 20.016 31.4258C19.7336 31.2281 19.4563 31.0126 19.1876 30.7794C16.8648 28.7742 15.6101 26.0798 15.6118 22.5628C15.6118 22.0321 15.7008 21.5317 15.9301 21.0758C16.5275 19.888 17.7771 19.3003 18.9239 19.6725C19.7884 19.9539 20.812 20.9138 20.788 22.6198C20.7743 23.6669 21.0653 24.616 21.596 25.4476C22.8421 27.4065 25.0947 28.1562 26.957 27.1679C27.438 26.9115 27.8694 26.5945 28.234 26.2134ZM22.0478 34.795H10.4698V24.6481C10.6136 26.0335 10.9371 27.3887 11.4369 28.7011C11.8032 29.6663 12.2414 30.5692 12.7378 31.4258L12.7395 31.4293C13.277 32.3589 13.8829 33.2333 14.5317 34.0667C14.9168 34.5618 15.4132 34.6027 15.8257 34.1504C16.2211 33.7141 16.2366 33.1086 15.86 32.5975C15.6238 32.2752 15.3773 31.9618 15.1428 31.6377C15.0931 31.57 15.0435 31.5006 14.9956 31.4311L14.9904 31.4258C13.2393 28.938 12.1182 26.1475 12.2157 23.0899C12.1712 21.5388 12.327 20.3777 12.8319 19.336C13.9292 17.0744 15.5536 15.7976 17.7086 15.5999C19.9458 15.3951 21.7911 16.3567 23.2169 18.4723C24.0112 19.6494 24.3261 21.0349 24.3364 22.545C24.3398 23.1718 24.7438 23.5956 25.2915 23.5849C25.764 23.5742 26.1371 23.1326 26.1388 22.5503C26.1423 20.9493 25.8615 19.4286 25.1649 18.0591C22.7034 13.2136 17.8421 12.3285 14.4855 14.4958C12.2876 15.9133 10.8173 18.0859 10.4818 21.1649C10.4783 21.2058 10.4732 21.245 10.4698 21.2859V16.0843C10.5143 16.0184 10.5605 15.9507 10.6067 15.8848C13.3146 12.0098 17.772 10.5674 21.7808 12.4372C24.8944 13.8885 27.0272 16.517 27.6571 20.668C27.7513 21.2931 27.7787 21.9395 27.7752 22.5752C27.7701 23.7773 27.094 24.8261 26.1132 25.2357C25.0468 25.6827 23.8263 25.2571 23.104 24.1975C22.7394 23.6615 22.6093 23.0418 22.6007 22.3615C22.587 21.2646 22.3046 20.2798 21.738 19.4232C20.3755 17.3611 17.9346 16.7663 16.0448 18.0698C14.7679 18.9495 13.96 20.2656 13.8727 22.0891C13.7751 24.1085 14.0712 26.062 14.809 27.8856C15.3687 29.2657 16.0859 30.4392 16.9435 31.4258L16.9486 31.4329C17.914 32.5423 19.0575 33.4131 20.3532 34.0738C20.9044 34.3534 21.483 34.5564 22.0478 34.795ZM25.0433 31.4258H25.271C25.6236 31.3563 26.1628 31.2726 26.69 31.1284C27.1505 31.0037 27.3764 30.5354 27.3096 29.978C27.248 29.4651 26.8697 29.0644 26.4332 29.0769C26.1953 29.0858 25.9591 29.1392 25.7212 29.1713C23.4669 29.4776 21.6114 28.548 20.1598 26.4378C19.3724 25.2945 19.0968 23.9233 19.0746 22.4542C19.066 21.797 18.6911 21.3732 18.1759 21.3875C17.6761 21.4017 17.3201 21.8415 17.3149 22.4737C17.3012 23.9055 17.5101 25.2892 18.0938 26.5357C19.5898 29.7322 21.8972 31.2495 25.0433 31.4258Z"
-            fill="#E8D2FF"
-          />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M28.2341 0.0090332L38.6997 10.5834H23.0431C21.0666 9.52022 18.8127 9.13203 16.4645 9.53627C15.4077 9.71791 14.4169 10.0723 13.49 10.5834H0.00189209L10.4409 0.0090332H28.2341Z"
-            fill="#E8D2FF"
-          />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M2.76566e-05 0.0090332H10.4692V13.023H10.4675C10.4212 13.0765 10.3732 13.1281 10.3269 13.1815C8.79702 14.916 7.69406 16.9728 7.21018 19.4748C6.57865 22.739 7.01805 25.9017 7.87195 29.0163C8.01249 29.531 8.44834 29.7963 8.87529 29.6895C9.47125 29.5417 9.77545 28.9273 9.56553 28.231C9.03896 26.4805 8.72052 24.6801 8.67427 22.8138C8.61022 20.2976 9.17059 18.0378 10.4675 16.086L10.4692 16.0842V21.2859C10.4675 21.2913 10.4675 21.2949 10.4675 21.2984C10.3536 22.4239 10.3536 23.5369 10.4675 24.632C10.4675 24.6374 10.4675 24.6427 10.4692 24.6481V42.0001L2.76566e-05 31.4258V0.0090332Z"
-            fill="#E8D2FF"
-          />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M38.6979 31.4257L28.259 42L8.39233e-05 42V31.4257L10.4657 31.4257H10.4675H12.7357L12.7375 31.4292C13.2765 32.3588 13.8814 33.2332 14.5289 34.0666C14.9149 34.5616 15.4113 34.6026 15.824 34.1503C16.2207 33.714 16.2349 33.1085 15.8596 32.5974C15.6212 32.2751 15.3757 31.9617 15.1409 31.6376C15.091 31.5699 15.043 31.5005 14.9932 31.431L14.9897 31.4257H16.9412L16.9483 31.4328C17.9125 32.5422 19.0564 33.413 20.3515 34.0719C20.9029 34.3533 21.4811 34.5563 22.0468 34.7949H22.472C22.4915 34.7736 22.5076 34.7468 22.5289 34.7344C22.9096 34.5082 23.0661 34.1164 23.0519 33.6249C23.0359 33.1316 22.7957 32.8361 22.4275 32.6794C22.3439 32.6437 22.2585 32.6135 22.1749 32.5814C21.4242 32.2876 20.709 31.9101 20.0312 31.4364C20.0259 31.4328 20.0206 31.4292 20.0152 31.4257H38.6979Z"
-            fill="#E8D2FF"
-          />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.2335 0.0090332V10.5828H25.6197L28.2335 0.0090332Z" fill="#E8D2FF" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.2335 41.9983L28.2335 31.4246H25.6197L28.2335 41.9983Z" fill="#E8D2FF" />
-          <path d="M25.2694 31.425C25.2546 31.4279 25.2401 31.4309 25.2259 31.4337C25.1645 31.4313 25.1034 31.4284 25.0427 31.425H25.2694Z" fill="#E8D2FF" />
-          <path d="M28.2338 16.2126C29.2651 18.3193 29.7004 20.6429 29.5324 23.0863C29.4412 24.414 28.9706 25.4447 28.2338 26.213V16.2126Z" fill="#E8D2FF" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.234 0.0090332L38.6997 10.5834V31.4258L28.234 42.0001V0.0090332Z" fill="#E8D2FF" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M2.76566e-05 10.5742L2.76566e-05 -0.000105858L10.4657 -0.000105858L2.76566e-05 10.5742Z" fill="#E8D2FF" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.2323 42V31.4257H38.6979L28.2323 42Z" fill="#E8D2FF" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M28.2323 0.0090332V10.5834L38.6979 10.5834L28.2323 0.0090332Z" fill="#E8D2FF" />
-          <path d="M38.6997 10.583H28.234V31.4258H38.6997V10.583Z" fill="#E8D2FF" />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M0.00183105 31.4254V10.583H10.4692V13.0227C10.423 13.0761 10.375 13.1278 10.3287 13.1812C8.79883 14.9157 7.69586 16.9725 7.21199 19.4745C6.58045 22.7387 7.01807 25.9014 7.87197 29.016C8.01429 29.5306 8.44834 29.796 8.87707 29.6891C9.47125 29.5413 9.77547 28.927 9.56733 28.2307C9.04076 26.4802 8.72232 24.6797 8.67607 22.8135C8.61203 20.2972 9.17059 18.0374 10.4692 16.0857V21.2981C10.3554 22.4235 10.3554 23.5365 10.4675 24.6317V31.4254V31.4468L0.00183105 31.4254Z"
-            fill="#E8D2FF"
-          />
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M28.234 41.9997H10.4675V31.4467V31.4253H10.4692L12.7392 31.4289C13.2782 32.3584 13.8813 33.2328 14.5306 34.0662C14.9167 34.5613 15.413 34.6022 15.8257 34.1499C16.2224 33.7136 16.2367 33.1082 15.8595 32.5971C15.6229 32.2747 15.3774 31.9613 15.1426 31.6372C15.0928 31.5695 15.043 31.5001 14.995 31.4306L16.9501 31.4324C17.9143 32.5419 19.0563 33.4127 20.3532 34.0734C20.9047 34.3529 21.4828 34.5559 22.0486 34.7945H22.4737C22.4933 34.7732 22.5093 34.7465 22.5306 34.734C22.9113 34.5079 23.0679 34.1179 23.0519 33.6246C23.0376 33.1313 22.7975 32.8357 22.4292 32.679C22.3456 32.6434 22.2602 32.6149 22.1766 32.581C21.4259 32.2872 20.7108 31.9097 20.033 31.436L28.234 31.4467V41.9997Z"
-            fill="#E8D2FF"
-          />
-        </svg>
+<div class="w-full flex flex-col gap-2 items-center justify-items-center">
+        <svg width="80" height="87" viewBox="0 0 80 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6431 26.9208V17.1029L58.3652 17.2907V33.5177C58.3369 33.4551 58.3051 33.3888 58.2732 33.3262C55.6795 28.132 51.9818 24.2151 47.6331 21.8775C43.5497 19.6798 38.893 18.8773 34.0383 19.7129C31.8515 20.0884 29.8063 20.821 27.8849 21.8775C25.6309 23.1217 23.5538 24.8151 21.6431 26.9208ZM58.3652 54.1879V71.9278H46.4583C46.4972 71.8837 46.5326 71.8285 46.5751 71.8027C47.3606 71.3352 47.6861 70.529 47.6543 69.5093C47.6224 68.4896 47.1271 67.8785 46.3663 67.5545C46.1929 67.4809 46.016 67.4183 45.8426 67.3521C44.2927 66.7446 42.8102 65.9642 41.4089 64.985C41.3983 64.9777 41.3877 64.9703 41.377 64.9629C40.7932 64.5543 40.22 64.1089 39.6644 63.6267C34.8627 59.4816 32.269 53.9118 32.2726 46.6413C32.2726 45.5443 32.4566 44.5099 32.9307 43.5675C34.1657 41.1121 36.7487 39.8972 39.1195 40.6666C40.9064 41.2483 43.0224 43.2325 42.9729 46.7591C42.9446 48.9237 43.5462 50.8858 44.6431 52.6049C47.2191 56.6543 51.8757 58.2042 55.7255 56.1611C56.7198 55.631 57.6115 54.9757 58.3652 54.1879ZM45.5772 71.9278H21.6431V50.952C21.9403 53.8161 22.609 56.6175 23.6423 59.3306C24.3995 61.3258 25.3054 63.1922 26.3315 64.9629L26.335 64.9703C27.4461 66.8919 28.6988 68.6994 30.0398 70.4223C30.836 71.4456 31.8621 71.5303 32.7149 70.5953C33.5323 69.6934 33.5641 68.4417 32.7857 67.3852C32.2974 66.7189 31.7878 66.071 31.303 65.401C31.2004 65.2611 31.0978 65.1175 30.9987 64.974L30.9881 64.9629C27.3683 59.8202 25.0506 54.0517 25.2523 47.7309C25.1603 44.5246 25.4823 42.1244 26.5261 39.9709C28.7943 35.2957 32.1523 32.6563 36.6072 32.2476C41.232 31.8243 45.0465 33.8121 47.994 38.1855C49.6358 40.6188 50.2869 43.4828 50.3081 46.6045C50.3152 47.9003 51.1503 48.7764 52.2826 48.7543C53.2592 48.7323 54.0306 47.8193 54.0341 46.6155C54.0412 43.3061 53.4609 40.1623 52.0208 37.3314C46.9325 27.3147 36.8832 25.4851 29.9443 29.9652C25.4009 32.8955 22.3614 37.3867 21.6678 43.7516C21.6607 43.8362 21.6501 43.9172 21.6431 44.0019V33.2489C21.7351 33.1127 21.8306 32.9728 21.9261 32.8366C27.524 24.8262 36.7381 21.8444 45.0252 25.7097C51.4617 28.71 55.8706 34.1435 57.1728 42.7245C57.3674 44.0166 57.424 45.3529 57.4169 46.6671C57.4063 49.1519 56.0086 51.3202 53.9811 52.1669C51.7766 53.0909 49.2537 52.211 47.7605 50.0207C47.0068 48.9126 46.7379 47.6316 46.7202 46.2254C46.6919 43.9577 46.108 41.922 44.9368 40.1513C42.1201 35.8884 37.0743 34.6588 33.1678 37.3535C30.5281 39.172 28.858 41.8925 28.6775 45.6621C28.4758 49.8367 29.088 53.875 30.6131 57.6446C31.7701 60.4976 33.2527 62.9235 35.0255 64.9629L35.0361 64.9777C37.0318 67.2711 39.3955 69.0713 42.0742 70.437C43.2135 71.015 44.4095 71.4345 45.5772 71.9278ZM51.7695 64.9629H52.2402C52.9691 64.8194 54.0837 64.6464 55.1735 64.3482C56.1254 64.0905 56.5924 63.1223 56.4544 61.9701C56.3271 60.9099 55.5451 60.0816 54.6427 60.1074C54.1509 60.1258 53.6626 60.2362 53.1708 60.3025C48.5106 60.9357 44.6749 59.014 41.6743 54.6517C40.0466 52.2884 39.4769 49.4538 39.4309 46.4168C39.4132 45.0584 38.6383 44.1823 37.5732 44.2117C36.54 44.2412 35.804 45.1504 35.7934 46.4572C35.7651 49.417 36.1967 52.2773 37.4034 54.8542C40.496 61.4621 45.2658 64.5985 51.7695 64.9629Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.3656 0.0181885L80.0002 21.8774H47.6347C43.549 19.6797 38.8896 18.8773 34.0353 19.7129C31.8509 20.0884 29.8026 20.8209 27.8866 21.8774H0.00390625L21.5834 0.0181885H58.3656Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.00012207 0.0181885H21.6421V26.9207H21.6384C21.5428 27.0312 21.4435 27.138 21.3479 27.2484C18.1853 30.834 15.9052 35.0858 14.905 40.2579C13.5995 47.0057 14.5078 53.5436 16.273 59.9821C16.5635 61.046 17.4645 61.5945 18.3471 61.3737C19.579 61.0681 20.2079 59.7981 19.7739 58.3587C18.6854 54.7401 18.0271 51.0182 17.9315 47.1603C17.7991 41.9587 18.9575 37.2872 21.6384 33.2526L21.6421 33.2489V44.0018C21.6384 44.0129 21.6384 44.0203 21.6384 44.0276C21.403 46.3542 21.403 48.655 21.6384 50.9189C21.6384 50.93 21.6384 50.941 21.6421 50.952V86.8222L0.00012207 64.9629V0.0181885Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M79.9961 64.9635L58.4166 86.8228L-0.000167847 86.8228V64.9635L21.6344 64.9635H21.6381H26.3269L26.3306 64.9709C27.4449 66.8925 28.6952 68.6999 30.0338 70.4227C30.8319 71.4461 31.8578 71.5309 32.711 70.5958C33.5311 69.6939 33.5605 68.4422 32.7846 67.3857C32.2918 66.7194 31.7843 66.0715 31.2989 65.4015C31.1959 65.2617 31.0966 65.1181 30.9937 64.9745L30.9863 64.9635H35.0205L35.0352 64.9782C37.0284 67.2717 39.393 69.0717 42.0702 70.4338C43.2102 71.0154 44.4054 71.4351 45.5749 71.9284H46.4538C46.4942 71.8842 46.5273 71.829 46.5715 71.8032C47.3584 71.3357 47.682 70.5258 47.6526 69.5098C47.6195 68.4901 47.1231 67.8791 46.3618 67.5551C46.189 67.4815 46.0125 67.4189 45.8396 67.3526C44.2877 66.7452 42.8094 65.9648 41.4083 64.9856C41.3972 64.9782 41.3862 64.9709 41.3752 64.9635H79.9961Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.3643 0.0181885V21.8762H52.9609L58.3643 0.0181885Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.3643 86.8195L58.3643 64.9615H52.9609L58.3643 86.8195Z" fill="var(--accent, #223360)"/>
+  <path d="M52.2373 64.9614C52.2067 64.9673 52.1766 64.9734 52.1474 64.9793C52.0205 64.9743 51.8941 64.9684 51.7686 64.9614H52.2373Z" fill="var(--accent, #223360)"/>
+  <path d="M58.3647 33.5154C60.4966 37.8703 61.3965 42.6737 61.0492 47.7245C60.8606 50.4691 59.8879 52.5999 58.3647 54.1882V33.5154Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.3652 0.0181885L79.9999 21.8774V64.9629L58.3652 86.8222V0.0181885Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.000116348 21.8591L0.000116348 -0.0001297L21.6348 -0.0001297L0.000116348 21.8591Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.3614 86.8228V64.9635H79.9961L58.3614 86.8228Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.3614 0.0181885V21.8774L79.9961 21.8774L58.3614 0.0181885Z" fill="var(--accent, #223360)"/>
+  <path d="M79.9999 21.8771H58.3652V64.9632H79.9999V21.8771Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.00390625 64.9625V21.8771H21.6421V26.9204C21.5465 27.0308 21.4473 27.1376 21.3517 27.2481C18.1891 30.8336 15.909 35.0854 14.9087 40.2576C13.6032 47.0053 14.5079 53.5432 16.2731 59.9818C16.5673 61.0457 17.4645 61.5942 18.3508 61.3733C19.5791 61.0677 20.208 59.7977 19.7777 58.3584C18.6892 54.7397 18.0309 51.0179 17.9353 47.1599C17.8029 41.9583 18.9576 37.2869 21.6421 33.2522V44.0273C21.4068 46.3538 21.4068 48.6546 21.6385 50.9186V64.9625V65.0067L0.00390625 64.9625Z" fill="var(--accent, #223360)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M58.3652 86.822H21.6382V65.0069V64.9626H21.6419L26.3343 64.97C27.4486 66.8916 28.6953 68.6992 30.0376 70.422C30.8356 71.4454 31.8616 71.53 32.7148 70.595C33.5349 69.6931 33.5643 68.4415 32.7847 67.3849C32.2955 66.7186 31.788 66.0707 31.3026 65.4007C31.1996 65.2608 31.0967 65.1173 30.9974 64.9737L35.039 64.9774C37.0322 67.2708 39.3931 69.071 42.074 70.4367C43.214 71.0147 44.4092 71.4343 45.5786 71.9276H46.4575C46.498 71.8834 46.5311 71.8282 46.5752 71.8024C47.3622 71.3349 47.6858 70.5287 47.6527 69.509C47.6233 68.4893 47.1268 67.8782 46.3656 67.5543C46.1927 67.4806 46.0162 67.4217 45.8434 67.3518C44.2915 66.7444 42.8131 65.964 41.412 64.9848L58.3652 65.0069V86.822Z" fill="var(--accent, #223360)"/>
+</svg>
+        <d-heading size='s' class="text-accent">DidroomWallet</d-heading>
+        </div>
       </Host>
     );
   }

diff --git a/src/components/logo/logo.stories.ts b/src/components/logo/logo.stories.ts
@@ -1,14 +1,14 @@
-import { DLogo } from './d-logo';
+import type { Components } from '../../components.js';
 import { Meta, StoryObj } from '@storybook/html';
 
 const meta = {
   title: 'Design System/Atoms/Logo',
   render: () =>
     `<d-logo></d-logo>`,
-} satisfies Meta<DLogo>;
+} satisfies Meta<Components.DLogo>;
 
 export default meta;
-type Story = StoryObj<DLogo>;
+type Story = StoryObj<Components.DLogo>;
 
 export const Default: Story = {
   parameters: {

diff --git a/src/components/logo/readme.md b/src/components/logo/readme.md
@@ -5,6 +5,19 @@
 <!-- Auto Generated Below -->
 
 
+## Dependencies
+
+### Depends on
+
+- [d-heading](../heading)
+
+### Graph
+```mermaid
+graph TD;
+  d-logo --> d-heading
+  style d-logo fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*