add: icon svg et librairie pour load svg comme composant vue3

2026-03-06 06:59:19 +01:00
parent 153fedf413
commit 57246f6ae5
14 changed files with 295 additions and 1 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
      "version": "0.0.0",
      "dependencies": {
        "moveable": "^0.53.0",
+        "vite-svg-loader": "^5.1.1",
        "vue": "^3.5.25",
        "vue3-moveable": "^0.28.0"
      },
@@ -1062,6 +1063,21 @@
      "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==",
      "license": "MIT"
    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/croact": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/croact/-/croact-1.0.4.tgz",
@@ -1108,6 +1124,22 @@
        "croact": "^1.0.4"
      }
    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
    "node_modules/css-styled": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/css-styled/-/css-styled-1.0.8.tgz",
@@ -1127,12 +1159,154 @@
        "@scena/matrix": "^1.0.0"
      }
    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
    "node_modules/csstype": {
      "version": "3.2.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
      "license": "MIT"
    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
    "node_modules/entities": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -1269,6 +1443,12 @@
        "@jridgewell/sourcemap-codec": "^1.5.5"
      }
    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0"
+    },
    "node_modules/moveable": {
      "version": "0.53.0",
      "resolved": "https://registry.npmjs.org/moveable/-/moveable-0.53.0.tgz",
@@ -1282,6 +1462,12 @@
        "react-moveable": "~0.56.0"
      }
    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
    "node_modules/nanoid": {
      "version": "3.3.11",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1300,6 +1486,18 @@
        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
      }
    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
    "node_modules/overlap-area": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz",
@@ -1441,6 +1639,15 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/sax": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.5.0.tgz",
+      "integrity": "sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
    "node_modules/selecto": {
      "version": "1.26.3",
      "resolved": "https://registry.npmjs.org/selecto/-/selecto-1.26.3.tgz",
@@ -1468,6 +1675,31 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/svgo": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
+      "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1560,6 +1792,19 @@
        }
      }
    },
+    "node_modules/vite-svg-loader": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.1.tgz",
+      "integrity": "sha512-RPzcXA/EpKJA0585x58DBgs7my2VfeJ+j2j1EoHY4Zh82Y7hV4cR1fElgy2aZi85+QSrcLLoTStQ5uZjD68u+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "svgo": "^3.3.3"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.13"
+      }
+    },
    "node_modules/vue": {
      "version": "3.5.29",
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "moveable": "^0.53.0",
+    "vite-svg-loader": "^5.1.1",
    "vue": "^3.5.25",
    "vue3-moveable": "^0.28.0"
  },
--- a/src/assets/icons/about.svg
+++ b/src/assets/icons/about.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85.1 99.94">
+  <path d="M44.95,76.19h-10.74l-1.98,23.75H13.43l1.98-23.75H0v-18.8h17.1l1.41-16.96H0v-18.8h20.21L22.05,0h18.8l-1.84,21.63h10.74l1.84-21.63h18.8l-1.84,21.63h16.54v18.8h-18.24l-1.41,16.96h19.65v18.8h-21.35l-1.98,23.75h-18.8l1.98-23.75ZM46.65,57.39l1.41-16.96h-10.74l-1.41,16.96h10.74Z"/>
+</svg>
--- a/src/assets/icons/close.svg
+++ b/src/assets/icons/close.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.73 53.59">
+  <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+</svg>
--- a/src/assets/icons/contact.svg
+++ b/src/assets/icons/contact.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.29 109.29">
+  <path d="M26.84,102.1c-8.31-4.79-14.87-11.36-19.66-19.72C2.4,74.02,0,64.76,0,54.58s2.4-19.42,7.19-27.74c4.79-8.31,11.34-14.86,19.66-19.66C35.16,2.4,44.44,0,54.71,0s19.42,2.4,27.73,7.19c8.31,4.79,14.86,11.34,19.66,19.66,4.79,8.31,7.19,17.56,7.19,27.74v42.75h-12.72v-7.89c-2.97,2.46-6.3,4.37-9.99,5.72-3.69,1.36-7.53,2.04-11.51,2.04-7.21,0-13.78-2.16-19.72-6.49l.64,18.45c-.34.08-.76.13-1.27.13-10.26,0-19.55-2.4-27.86-7.19ZM24.75,71.56c2.84,5.13,6.74,9.25,11.71,12.34,4.96,3.1,10.5,4.77,16.6,5.02-3.56-3.22-6.36-7.02-8.4-11.39-2.04-4.37-3.05-9.05-3.05-14.06,0-6.02,1.5-11.58,4.52-16.67,3.01-5.09,7.08-9.14,12.21-12.15,5.13-3.01,10.71-4.52,16.73-4.52.85,0,2.2.08,4.07.25-3.05-3.14-6.7-5.58-10.94-7.32-4.24-1.74-8.74-2.61-13.49-2.61-6.36,0-12.15,1.49-17.37,4.45-5.22,2.97-9.33,7.06-12.34,12.28-3.01,5.22-4.52,11.01-4.52,17.37s1.42,11.85,4.26,16.99ZM84.29,72.71c2.59-2.5,3.88-5.49,3.88-8.97s-1.29-6.59-3.88-9.1c-2.59-2.5-5.66-3.75-9.22-3.75s-6.57,1.25-9.03,3.75c-2.46,2.5-3.69,5.53-3.69,9.1s1.23,6.57,3.69,9.03c2.46,2.46,5.47,3.69,9.03,3.69s6.64-1.25,9.22-3.75Z"/>
+</svg>
--- a/src/assets/icons/file.svg
+++ b/src/assets/icons/file.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.5 103.19">
+  <path d="M59.26,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45ZM73.16,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45ZM87.06,78.8c-.97-.97-1.45-2.13-1.45-3.5s.48-2.47,1.45-3.42c.97-.95,2.13-1.42,3.5-1.42s2.53.47,3.5,1.42c.97.95,1.45,2.09,1.45,3.42s-.48,2.53-1.45,3.5-2.13,1.45-3.5,1.45-2.53-.48-3.5-1.45Z"/>
+  <path d="M117.92,68.62h.54S94.78,0,94.78,0H0v103.19h118.5v-34.54l-.58-.03ZM94.6,87.19H16V16h68.44l17.71,51.84.35,19.35h-7.9Z"/>
+</svg>
--- a/src/assets/icons/folder.svg
+++ b/src/assets/icons/folder.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.5 103.19">
+  <path d="M78.75,24.59c-1.86-.06-3.42-.72-4.65-1.99-1.3-1.33-1.95-2.97-1.95-4.9V0H10.95v24.59H0v78.6h118.5V24.59h-39.75ZM102.5,87.19H16v-46.29h11.55v-24.9h27.8v1.05c0,4.4,1.03,8.38,3.1,11.95,2.07,3.57,4.92,6.38,8.55,8.45,3.55,2.02,7.47,3.04,11.75,3.09v.05h23.75v46.6Z"/>
+</svg>
--- a/src/assets/icons/info.svg
+++ b/src/assets/icons/info.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.76 100.65">
+  <path d="M25.3,26.58c3.77,0,6.93-1.29,9.47-3.89,2.54-2.59,3.82-5.77,3.82-9.54s-1.3-6.66-3.89-9.26c-2.59-2.59-5.73-3.89-9.4-3.89s-6.69,1.32-9.33,3.96-3.96,5.7-3.96,9.19c0,3.77,1.32,6.95,3.96,9.54,2.64,2.59,5.75,3.89,9.33,3.89Z"/>
+  <polygon points="36.19 77.18 36.19 57.25 36.19 33.79 13.57 33.79 0 33.79 0 57.25 13.57 57.25 13.57 77.18 0 77.18 0 100.65 49.76 100.65 49.76 77.18 36.19 77.18"/>
+</svg>
--- a/src/assets/icons/link.svg
+++ b/src/assets/icons/link.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.15 105.63">
+  <path d="M35.16,0h23.64L23.64,105.63H0L35.16,0Z"/>
+  <path d="M74.51,0h23.64l-35.16,105.63h-23.64L74.51,0Z"/>
+</svg>
--- a/src/assets/icons/next.svg
+++ b/src/assets/icons/next.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
+  <polygon points="24.73 0 24.73 17.46 0 17.46 0 35.64 24.73 35.64 24.73 53.1 80.03 26.6 80.03 26.4 24.73 0"/>
+</svg>
--- a/src/assets/icons/play.svg
+++ b/src/assets/icons/play.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.5 73.4">
+  <path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
+</svg>
--- a/src/assets/icons/prev.svg
+++ b/src/assets/icons/prev.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80.03 53.1">
+  <polygon points="55.3 53.1 55.3 35.64 80.03 35.64 80.03 17.46 55.3 17.46 55.3 0 0 26.5 0 26.7 55.3 53.1"/>
+</svg>
--- a/src/assets/icons/reload.svg
+++ b/src/assets/icons/reload.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.86 103.76">
+  <path d="M110.86,57.31l-.12-.15-42.28.88,7.87,10.04c-1.67,2.55-3.76,4.81-6.28,6.77-5.14,4.01-11.14,6.01-18.02,6.01-5.47,0-10.41-1.27-14.84-3.82-4.43-2.54-7.92-6.03-10.46-10.46-2.55-4.43-3.82-9.33-3.82-14.7s1.27-10.27,3.82-14.7c2.54-4.43,6.03-7.92,10.46-10.46,4.43-2.55,9.38-3.82,14.84-3.82,6.88,0,12.89,2,18.02,6.01,5.14,4.01,8.5,9.21,10.11,15.62h23.32c-1.13-8.48-4.08-16.12-8.84-22.9-4.76-6.79-10.84-12.09-18.24-15.9-7.4-3.82-15.53-5.72-24.38-5.72-9.71,0-18.52,2.29-26.43,6.86-7.92,4.57-14.16,10.79-18.73,18.66C2.28,33.39,0,42.17,0,51.88s2.28,18.5,6.86,26.36c4.57,7.87,10.81,14.09,18.73,18.66,7.92,4.57,16.73,6.86,26.43,6.86,8.86,0,16.99-1.91,24.38-5.73,5.62-2.9,10.47-6.65,14.56-11.26l8.97,11.45,10.92-40.92Z"/>
+</svg>
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import svgLoader from 'vite-svg-loader'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), svgLoader()],
  server: {
    host: '0.0.0.0',
    port: 8080,