Merge pull request #59 from mermaid-js/refactor/use-icon-component-in…

…stead-of-svg-codes-part-1

refactor: use icon component instead of svg code (part-1)

package.json

@@ -85,6 +85,7 @@
     "typescript": "^4.7.4",
     "vite": "^3.2.3",
     "vite-plugin-css-injected-by-js": "^2.2.0",
+    "vite-svg-loader": "^4.0.0",
     "vitest": "^0.26.1"
   },
   "eslintConfig": {

src/components/DiagramFrame/Debug/Debug.vue

@@ -4,31 +4,21 @@
       <div
         class="ml-4 text-xs inline-flex items-center font-bold leading-sm px-3 py-1 bg-green-200 text-green-700 rounded-sm"
       >
-        <svg
-          class="h-4 w-4"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="6" y1="3" x2="6" y2="15"></line>
-          <circle cx="18" cy="6" r="3"></circle>
-          <circle cx="6" cy="18" r="3"></circle>
-          <path d="M18 9a9 9 0 0 1-9 9"></path>
-        </svg>
+        <Icon name="debug" icon-class="h-4 w-4" />
         <span class="inline-block px-2">{{ gitBranch }}:{{ commitHash }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import Icon from "@/components/Icon/Icon.vue";
+
 const commitHash = 'process.env.VUE_APP_GIT_HASH';
 const gitBranch = 'process.env.VUE_APP_GIT_BRANCH';
 export default {
   name: 'Debug',
+  components: {Icon},
   data() {
     return {
       commitHash,