remove hardcoded svg

Matteo-it · Matteo-it · commit fd74b1c33a92 · 2025-12-01T17:04:54.000+01:00
diff --git a/examples/led-matrix-painter/assets/img/brush.svg b/examples/led-matrix-painter/assets/img/brush.svg
@@ -1,3 +1,3 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M27.3302 3.68976C24.2702 3.61975 19.9002 6.40973 14.3702 11.9697C12.4701 13.8798 11.0802 15.4898 10.6601 15.9797C8.11016 16.1898 6.09027 18.3298 6.09027 20.9298C6.09027 22.9598 5.20013 24.8597 3.65021 26.1498C3.35016 26.4097 3.22016 26.8098 3.33026 27.1898C3.44012 27.5698 3.76019 27.8497 4.15021 27.9097C4.73017 27.9898 5.32025 28.0397 5.90021 28.0397C7.52021 28.0397 9.11017 27.7197 10.5903 27.1097C12.0702 26.4998 13.4301 25.5997 14.5803 24.4498C15.4301 23.6097 15.9301 22.5198 16.0202 21.3398C16.2201 21.1697 16.6102 20.8298 17.1302 20.3698C17.8802 19.6998 18.9002 18.7498 20.0302 17.6298C25.5903 12.0997 28.3802 7.73975 28.3102 4.66974C28.3002 4.12976 27.8702 3.69977 27.3302 3.68976ZM13.1701 23.0397C11.3802 24.8298 8.97014 25.8798 6.47014 26.0198C7.51018 24.5498 8.09026 22.7798 8.09026 20.9298C8.09026 19.2897 9.4301 17.9598 11.0702 17.9598C11.8501 17.9598 12.6202 18.2798 13.1701 18.8298C13.7301 19.3898 14.0402 20.1398 14.0402 20.9298C14.0402 21.7298 13.7301 22.4697 13.1701 23.0397ZM15.6601 18.9998C15.4101 18.4097 15.0502 17.8698 14.5903 17.4097C14.1302 16.9598 13.5903 16.5997 12.9902 16.3497C13.5402 15.7397 14.3002 14.9097 15.2001 13.9797C15.7201 14.3798 16.2302 14.8098 16.7101 15.2897C17.1901 15.7698 17.6202 16.2798 18.0202 16.7997C17.0903 17.6898 16.2702 18.4498 15.6601 18.9998ZM19.4501 15.3798C19.0502 14.8597 18.6001 14.3597 18.1202 13.8798C17.6402 13.3998 17.1402 12.9498 16.6202 12.5497C20.5402 8.72973 23.8501 6.40973 26.1701 5.82977C25.5903 8.14978 23.2702 11.4598 19.4501 15.3798Z" fill="#25C2C7"/>
+<path d="M27.3302 3.68976C24.2702 3.61975 19.9002 6.40973 14.3702 11.9697C12.4701 13.8798 11.0802 15.4898 10.6601 15.9797C8.11016 16.1898 6.09027 18.3298 6.09027 20.9298C6.09027 22.9598 5.20013 24.8597 3.65021 26.1498C3.35016 26.4097 3.22016 26.8098 3.33026 27.1898C3.44012 27.5698 3.76019 27.8497 4.15021 27.9097C4.73017 27.9898 5.32025 28.0397 5.90021 28.0397C7.52021 28.0397 9.11017 27.7197 10.5903 27.1097C12.0702 26.4998 13.4301 25.5997 14.5803 24.4498C15.4301 23.6097 15.9301 22.5198 16.0202 21.3398C16.2201 21.1697 16.6102 20.8298 17.1302 20.3698C17.8802 19.6998 18.9002 18.7498 20.0302 17.6298C25.5903 12.0997 28.3802 7.73975 28.3102 4.66974C28.3002 4.12976 27.8702 3.69977 27.3302 3.68976ZM13.1701 23.0397C11.3802 24.8298 8.97014 25.8798 6.47014 26.0198C7.51018 24.5498 8.09026 22.7798 8.09026 20.9298C8.09026 19.2897 9.4301 17.9598 11.0702 17.9598C11.8501 17.9598 12.6202 18.2798 13.1701 18.8298C13.7301 19.3898 14.0402 20.1398 14.0402 20.9298C14.0402 21.7298 13.7301 22.4697 13.1701 23.0397ZM15.6601 18.9998C15.4101 18.4097 15.0502 17.8698 14.5903 17.4097C14.1302 16.9598 13.5903 16.5997 12.9902 16.3497C13.5402 15.7397 14.3002 14.9097 15.2001 13.9797C15.7201 14.3798 16.2302 14.8098 16.7101 15.2897C17.1901 15.7698 17.6202 16.2798 18.0202 16.7997C17.0903 17.6898 16.2702 18.4498 15.6601 18.9998ZM19.4501 15.3798C19.0502 14.8597 18.6001 14.3597 18.1202 13.8798C17.6402 13.3998 17.1402 12.9498 16.6202 12.5497C20.5402 8.72973 23.8501 6.40973 26.1701 5.82977C25.5903 8.14978 23.2702 11.4598 19.4501 15.3798Z" fill="#008184"/>
 </svg>
diff --git a/examples/led-matrix-painter/assets/img/eraser.svg b/examples/led-matrix-painter/assets/img/eraser.svg
@@ -1,3 +1,3 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.5601 5.91016C20.8201 5.91016 21.0803 6.0102 21.2603 6.2002L28.3306 13.2705C28.72 13.6605 28.7202 14.3005 28.3306 14.6904L16.3101 26.71C16.13 26.89 15.8699 27 15.6099 27H8.54053C8.27057 27 8.02049 26.8899 7.83057 26.71L4.29053 23.1699C3.90052 22.78 3.90052 22.1498 4.29053 21.7598L19.8501 6.2002C20.0401 6.01023 20.2901 5.91016 20.5601 5.91016ZM25.6265 25C26.1791 25 26.6264 25.4478 26.6265 26C26.6265 26.5522 26.1792 27 25.6265 27H20.6265C20.0739 26.9997 19.6265 26.5521 19.6265 26C19.6266 25.448 20.074 25.0003 20.6265 25H25.6265ZM6.40967 22.46L8.94971 25H15.1899L22.6802 17.5205L17.02 11.8604L6.40967 22.46ZM18.4302 10.4404L24.0903 16.1006L26.2104 13.9805L20.5601 8.32031L18.4302 10.4404Z" fill="#25C2C7"/>
+<path d="M20.5601 5.91016C20.8201 5.91016 21.0803 6.0102 21.2603 6.2002L28.3306 13.2705C28.72 13.6605 28.7202 14.3005 28.3306 14.6904L16.3101 26.71C16.1301 26.89 15.8699 27 15.6099 27H8.54053C8.27057 27 8.02049 26.8899 7.83057 26.71L4.29053 23.1699C3.90052 22.78 3.90052 22.1498 4.29053 21.7598L19.8501 6.2002C20.0401 6.01023 20.2901 5.91016 20.5601 5.91016ZM25.6265 25C26.1791 25 26.6264 25.4478 26.6265 26C26.6265 26.5522 26.1792 27 25.6265 27H20.6265C20.0739 26.9997 19.6265 26.5521 19.6265 26C19.6266 25.448 20.074 25.0003 20.6265 25H25.6265ZM6.40967 22.46L8.94971 25H15.1899L22.6802 17.5205L17.02 11.8604L6.40967 22.46ZM18.4302 10.4404L24.0903 16.1006L26.2104 13.9805L20.5601 8.32031L18.4302 10.4404Z" fill="#008184"/>
 </svg>
diff --git a/examples/led-matrix-painter/assets/index.html b/examples/led-matrix-painter/assets/index.html
@@ -41,24 +41,14 @@ <h3 class="box-title">Tools</h3>
             <div class="custom-select-wrapper">
               <div class="custom-select">
                 <div class="custom-select__trigger">
-                  <svg width="16" height="16" viewBox="0 0 32 32" class="tool-icon" style="vertical-align: middle;">
-<path d="M27.3302 3.68976C24.2702 3.61975 19.9002 6.40973 14.3702 11.9697C12.4701 13.8798 11.0802 15.4898 10.6601 15.9797C8.11016 16.1898 6.09027 18.3298 6.09027 20.9298C6.09027 22.9598 5.20013 24.8597 3.65021 26.1498C3.35016 26.4097 3.22016 26.8098 3.33026 27.1898C3.44012 27.5698 3.76019 27.8497 4.15021 27.9097C4.73017 27.9898 5.32025 28.0397 5.90021 28.0397C7.52021 28.0397 9.11017 27.7197 10.5903 27.1097C12.0702 26.4998 13.4301 25.5997 14.5803 24.4498C15.4301 23.6097 15.9301 22.5198 16.0202 21.3398C16.2201 21.1697 16.6102 20.8298 17.1302 20.3698C17.8802 19.6998 18.9002 18.7498 20.0302 17.6298C25.5903 12.0997 28.3802 7.73975 28.3102 4.66974C28.3002 4.12976 27.8702 3.69977 27.3302 3.68976ZM13.1701 23.0397C11.3802 24.8298 8.97014 25.8798 6.47014 26.0198C7.51018 24.5498 8.09026 22.7798 8.09026 20.9298C8.09026 19.2897 9.4301 17.9598 11.0702 17.9598C11.8501 17.9598 12.6202 18.2798 13.1701 18.8298C13.7301 19.3898 14.0402 20.1398 14.0402 20.9298C14.0402 21.7298 13.7301 22.4697 13.1701 23.0397ZM15.6601 18.9998C15.4101 18.4097 15.0502 17.8698 14.5903 17.4097C14.1302 16.9598 13.5903 16.5997 12.9902 16.3497C13.5402 15.7397 14.3002 14.9097 15.2001 13.9797C15.7201 14.3798 16.2302 14.8098 16.7101 15.2897C17.1901 15.7698 17.6202 16.2798 18.0202 16.7997C17.0903 17.6898 16.2702 18.4498 15.6601 18.9998ZM19.4501 15.3798C19.0502 14.8597 18.6001 14.3597 18.1202 13.8798C17.6402 13.3998 17.1402 12.9498 16.6202 12.5497C20.5402 8.72973 23.8501 6.40973 26.1701 5.82977C25.5903 8.14978 23.2702 11.4598 19.4501 15.3798Z"/>
-</svg>
-                  <svg width="7" height="4" viewBox="0 0 7 4" class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.50205 4.00205C3.43624 4.00243 3.37101 3.98981 3.31009 3.96493C3.24917 3.94005 3.19377 3.90339 3.14705 3.85705L0.147046 0.857046C0.0528938 0.762894 0 0.635196 0 0.502046C0 0.368895 0.0528938 0.241197 0.147046 0.147046C0.241197 0.0528938 0.368895 0 0.502046 0C0.635196 0 0.762894 0.0528938 0.857046 0.147046L3.50205 2.79705L6.14705 0.147046C6.2412 0.0528938 6.36889 0 6.50205 0C6.6352 0 6.76289 0.0528938 6.85705 0.147046C6.9512 0.241197 7.00409 0.368895 7.00409 0.502046C7.00409 0.635196 6.9512 0.762894 6.85705 0.857046L3.85705 3.85705C3.81033 3.90339 3.75492 3.94005 3.694 3.96493C3.63308 3.98981 3.56785 4.00243 3.50205 4.00205Z" fill="#008184"/>
-</svg>
+                  <img src="img/brush.svg" class="tool-icon" alt="Brush" width="16" height="16" style="vertical-align: middle;">
+                  <img src="img/select-arrow.svg" class="dropdown-arrow" alt="Dropdown" width="7" height="4">
                 </div>
                 <div class="custom-options">
                   <div class="custom-option" data-value="brush">
-                    <svg width="16" height="16" viewBox="0 0 32 32" class="tool-icon" style="vertical-align: middle;">
-<path d="M27.3302 3.68976C24.2702 3.61975 19.9002 6.40973 14.3702 11.9697C12.4701 13.8798 11.0802 15.4898 10.6601 15.9797C8.11016 16.1898 6.09027 18.3298 6.09027 20.9298C6.09027 22.9598 5.20013 24.8597 3.65021 26.1498C3.35016 26.4097 3.22016 26.8098 3.33026 27.1898C3.44012 27.5698 3.76019 27.8497 4.15021 27.9097C4.73017 27.9898 5.32025 28.0397 5.90021 28.0397C7.52021 28.0397 9.11017 27.7197 10.5903 27.1097C12.0702 26.4998 13.4301 25.5997 14.5803 24.4498C15.4301 23.6097 15.9301 22.5198 16.0202 21.3398C16.2201 21.1697 16.6102 20.8298 17.1302 20.3698C17.8802 19.6998 18.9002 18.7498 20.0302 17.6298C25.5903 12.0997 28.3802 7.73975 28.3102 4.66974C28.3002 4.12976 27.8702 3.69977 27.3302 3.68976ZM13.1701 23.0397C11.3802 24.8298 8.97014 25.8798 6.47014 26.0198C7.51018 24.5498 8.09026 22.7798 8.09026 20.9298C8.09026 19.2897 9.4301 17.9598 11.0702 17.9598C11.8501 17.9598 12.6202 18.2798 13.1701 18.8298C13.7301 19.3898 14.0402 20.1398 14.0402 20.9298C14.0402 21.7298 13.7301 22.4697 13.1701 23.0397ZM15.6601 18.9998C15.4101 18.4097 15.0502 17.8698 14.5903 17.4097C14.1302 16.9598 13.5903 16.5997 12.9902 16.3497C13.5402 15.7397 14.3002 14.9097 15.2001 13.9797C15.7201 14.3798 16.2302 14.8098 16.7101 15.2897C17.1901 15.7698 17.6202 16.2798 18.0202 16.7997C17.0903 17.6898 16.2702 18.4498 15.6601 18.9998ZM19.4501 15.3798C19.0502 14.8597 18.6001 14.3597 18.1202 13.8798C17.6402 13.3998 17.1402 12.9498 16.6202 12.5497C20.5402 8.72973 23.8501 6.40973 26.1701 5.82977C25.5903 8.14978 23.2702 11.4598 19.4501 15.3798Z"/>
-</svg>
-                  </div>
-                  <div class="custom-option" data-value="eraser">
-                    <svg width="16" height="16" viewBox="0 0 32 32" class="tool-icon" style="vertical-align: middle;">
-<path d="M25,5 L7,23 L9,25 L27,7 L25,5 Z M5,25 L7,23 L9,25 L7,27 L5,25 Z"/>
-</svg>
+                    <img src="img/brush.svg" class="tool-icon" alt="Brush" width="16" height="16" style="vertical-align: middle;">
                   </div>
+                  <div class="custom-option" data-value="eraser"><img src="img/eraser.svg" class="tool-icon" alt="Eraser" width="16" height="16" style="vertical-align: middle;"></div>
                 </div>
               </div>
             </div>
