converting needed svg icons to component so that not need to export a…

…ssets when implementing as a package in other projects
ShizukuIchi · Feb 22, 2023 · decd5f2 · decd5f2
1 parent 436c2bc
commit decd5f2
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 24 deletions.
diff --git a/public/line_height.svg b/public/line_height.svg
diff --git a/public/text.svg b/public/text.svg
diff --git a/src/Text.svelte b/src/Text.svelte
@@ -6,6 +6,8 @@
   import { timeout } from "./utils/helper.js";
   import { Fonts } from "./utils/prepareAssets.js";
   import Delete from "./icons/Delete.svelte";
+  import TextFamily from "./icons/TextFamily.svelte";
+  import Text from "./icons/Text.svelte";
   export let size;
   export let text;
   export let lineHeight;
@@ -185,7 +187,8 @@
           bind:value={_lineHeight} />
       </div>
       <div class="mr-2 flex items-center">
-        <img src="/text.svg" class="w-6 mr-2" alt="Font size" />
+        <Text  class="w-6 mr-2" alt="Font size" />
+
         <input
           type="number"
           min="12"
@@ -195,7 +198,7 @@
           bind:value={_size} />
       </div>
       <div class="mr-2 flex items-center">
-        <img src="/text-family.svg" class="w-4 mr-2" alt="Font family" />
+        <TextFamily  class="w-4 mr-2" alt="Font family" />
         <div class="relative w-32 md:w-40">
           <select
             bind:value={_fontFamily}

diff --git a/src/icons/LineHeight.svelte b/src/icons/LineHeight.svelte
@@ -0,0 +1,7 @@
+
+<script>
+    export let height = 24;
+    export let width = 24;
+
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 0 24 24" {width}><path d="M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm4-2v2h12V5H10zm0 14h12v-2H10v2zm0-6h12v-2H10v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
diff --git a/src/icons/Text.svelte b/src/icons/Text.svelte
@@ -0,0 +1,7 @@
+
+<script>
+    export let height = 24;
+    export let width = 24;
+
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" {height} viewBox="0 0 24 24" {width}><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M2.5,4v3h5v12h3V7h5V4H2.5z M21.5,9h-9v3h3v7h3v-7h3V9z"/></g></g></g></svg>
diff --git a/public/text-family.svg → src/icons/TextFamily.svelte b/public/text-family.svg → src/icons/TextFamily.svelte
@@ -1,9 +1,11 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<script>
+    export let height = 24;
+    export let width = 24;
+
+</script>
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="475.082px" height="475.082px" viewBox="0 0 475.082 475.082" style="enable-background:new 0 0 475.082 475.082;"
-	 xml:space="preserve">
+     {height} {width} viewBox="0 0 475.082 475.082" style="enable-background:new 0 0 475.082 475.082;"
+     xml:space="preserve">
 <g>
 	<path d="M473.371,433.11c-10.657-3.997-20.458-6.563-29.407-7.706c-8.945-0.767-15.516-2.95-19.701-6.567
 		c-2.475-1.529-5.808-6.95-9.996-16.279c-7.806-15.604-13.989-29.786-18.555-42.537c-7.427-20.181-13.617-35.789-18.565-46.829
@@ -21,34 +23,34 @@
 		c-15.321-0.195-29.93-0.383-43.824-0.574l48.535-128.477c7.424,15.037,16.178,35.117,26.264,60.242
 		c11.425,27.79,20.179,50.727,26.273,68.809L251.245,270.941z"/>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
-<g>
+    <g>
 </g>
 </svg>