coveragebook_components 0.6.2 → 0.6.4

data/app/assets/build/coco/icons/custom/eye-off-red.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <path d="M8.9 4.5c-.1-.6.2-1.1.8-1.2.7-.2 1.5-.3 2.3-.3 7.5 0 11.7 8.2 11.9 8.6.1.3.1.6 0 .9-.6 1.2-1.4 2.3-2.3 3.4-.2.2-.5.4-.8.4-.2 0-.5-.1-.6-.2-.4-.4-.5-1-.1-1.4.7-.8 1.3-1.6 1.8-2.5-.9-1.6-4.5-7-9.9-7-.6 0-1.3.1-1.9.2-.5-.1-1-.4-1.2-.9Zm14.8 19.2c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-4.5-4.5C16.1 20.4 14.1 21 12 21 4.5 21 .3 12.8.1 12.4c-.1-.3-.1-.6 0-.9 1.1-2.1 2.7-4 4.5-5.5L.3 1.7C-.1 1.3-.1.7.3.3c.4-.4 1-.4 1.4 0l22 22c.4.4.4 1 0 1.4ZM9.9 12.1c0 .5.2 1 .6 1.4.6.5 1.3.6 2 .4L10 11.4c0 .3-.1.5-.1.7Zm6.5 5.7L14 15.5c-.6.4-1.4.6-2.1.6-1 0-2-.4-2.7-1.1-.8-.7-1.2-1.7-1.3-2.8 0-.8.2-1.6.6-2.3L6 7.4C4.5 8.7 3.2 10.2 2.1 12c.9 1.6 4.5 7 9.9 7 1.5 0 3-.4 4.4-1.2Z" id="a"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(1 1)">
+      <mask id="b" fill="#fff">
+        <use xlink:href="#a"/>
+      </mask>
+      <use fill="#000" fill-rule="nonzero" xlink:href="#a"/>
+      <g mask="url(#b)" fill="#000">
+        <path d="M0 0h24v24H0z"/>
+      </g>
+    </g>
+    <path stroke="#DF5861" stroke-width="2" stroke-linecap="round" d="m1.5 1.5 23 23"/>
+  </g>
+</svg>

data/app/assets/build/coco/icons/custom/google-sso.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <mask id="a" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+  <path fill="#fff" d="M23.182 9.818H12v4.636h6.436c-.6 2.946-3.109 4.637-6.436 4.637A7.077 7.077 0 0 1 4.91 12 7.077 7.077 0 0 1 12 4.91c1.69 0 3.218.6 4.418 1.58L19.91 3C17.782 1.145 15.055 0 12 0 5.345 0 0 5.345 0 12c0 6.654 5.345 12 12 12 6 0 11.454-4.364 11.454-12 0-.71-.108-1.473-.272-2.182Z"/></mask>
+  <g mask="url(#a)">
+    <path fill="#FBBC05" d="M-1.09 19.09V4.91L8.181 12l-9.273 7.09Z"/>
+  </g>
+  <mask id="b" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+  <path fill="#fff" d="M23.182 9.818H12v4.636h6.436c-.6 2.946-3.109 4.637-6.436 4.637A7.077 7.077 0 0 1 4.91 12 7.077 7.077 0 0 1 12 4.91c1.69 0 3.218.6 4.418 1.58L19.91 3C17.782 1.145 15.055 0 12 0 5.345 0 0 5.345 0 12c0 6.654 5.345 12 12 12 6 0 11.454-4.364 11.454-12 0-.71-.108-1.473-.272-2.182Z"/></mask><g mask="url(#b)"><path fill="#EA4335" d="M-1.09 4.91 8.181 12 12 8.673l13.09-2.128V-1.09H-1.09v6Z"/></g><mask id="c" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M23.182 9.818H12v4.636h6.436c-.6 2.946-3.109 4.637-6.436 4.637A7.077 7.077 0 0 1 4.91 12 7.077 7.077 0 0 1 12 4.91c1.69 0 3.218.6 4.418 1.58L19.91 3C17.782 1.145 15.055 0 12 0 5.345 0 0 5.345 0 12c0 6.654 5.345 12 12 12 6 0 11.454-4.364 11.454-12 0-.71-.108-1.473-.272-2.182Z"/></mask><g mask="url(#c)"><path fill="#34A853" d="M-1.09 19.09 15.272 6.546l4.309.546 5.509-8.182v26.182H-1.091v-6Z"/></g><mask id="d" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M23.182 9.818H12v4.636h6.436c-.6 2.946-3.109 4.637-6.436 4.637A7.077 7.077 0 0 1 4.91 12 7.077 7.077 0 0 1 12 4.91c1.69 0 3.218.6 4.418 1.58L19.91 3C17.782 1.145 15.055 0 12 0 5.345 0 0 5.345 0 12c0 6.654 5.345 12 12 12 6 0 11.454-4.364 11.454-12 0-.71-.108-1.473-.272-2.182Z"/></mask><g mask="url(#d)"><path fill="#4285F4" d="M25.09 25.09 8.183 12 6 10.364l19.09-5.455v20.182Z"/></g>
+</svg>

data/app/assets/build/coco/icons/custom/layout-overlay.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill-rule="nonzero" fill="none">
+    <rect stroke="#028871" stroke-width="2" fill="#EBF7F5" x="1" y="1" width="22" height="22" rx="4"/>
+    <rect fill="#028871" x="4" y="9" width="8" height="2" rx="1"/>
+    <rect fill="#028871" x="4" y="13" width="6" height="2" rx="1"/>
+  </g>
+</svg>

data/app/assets/build/coco/icons/custom/layout-split.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill-rule="nonzero" fill="none">
+    <rect stroke="#028871" stroke-width="2" fill="#FAFAFA" x="1" y="1" width="22" height="22" rx="4"/>
+    <rect fill="#028871" opacity=".4" x="12" y="7" width="8" height="10" rx="2"/>
+    <rect fill="#028871" x="4" y="9" width="6" height="2" rx="1"/>
+    <rect fill="#028871" x="4" y="13" width="5" height="2" rx="1"/>
+  </g>
+</svg>

data/app/assets/build/coco/icons/custom/layout-stacked.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill-rule="nonzero" fill="none">
+    <rect stroke="#028871" stroke-width="2" fill="#FAFAFA" x="1" y="1" width="22" height="22" rx="4"/>
+    <rect fill="#028871" x="4.94" y="5.174" width="14" height="2" rx="1"/>
+    <rect fill="#028871" opacity=".4" x="4" y="10" width="16" height="10" rx="2"/>
+  </g>
+</svg>

data/app/assets/build/coco/icons/custom/microsoft-sso.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21">
+  <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
+  <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
+  <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
+  <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
+</svg>

data/app/assets/build/coco/icons/custom/montage.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill-rule="nonzero" fill="none">
+    <path d="M0 0h24v24H0z"/>
+    <g transform="translate(2 2)" stroke="currentColor" stroke-width="2">
+      <rect x="12" y="3" width="7" height="12" rx="2.105"/>
+      <rect x="1" y="1" width="7" height="7" rx="2.105"/>
+      <rect x="1" y="12" width="7" height="7" rx="2.105"/>
+    </g>
+  </g>
+</svg>

data/app/assets/css/base/utils/icons.css

@@ -1,15 +1,16 @@
 @layer utilities {
   .icon {
-    @apply text-current;
-    stroke-linecap: round;
-    stroke-linejoin: round;
   }
 
   .icon-stroke {
-    @apply fill-none stroke-2 stroke-current;
+    @apply fill-none stroke-2 stroke-current text-current;
+    stroke-linecap: round;
+    stroke-linejoin: round;
   }
 
   .icon-fill {
-    @apply fill-current;
+    @apply fill-current text-current;
+    stroke-linecap: round;
+    stroke-linejoin: round;
   }
 }

data/app/assets/css/book.css

@@ -1,4 +1,5 @@
 @import "./book/config";
 @import "./base/base";
 
+@import-glob "@baseComponents/**/*.css";
 @import-glob "@bookComponents/**/*.css";

data/app/assets/custom_icons/other/eye-off-red.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <path d="M8.9 4.5c-.1-.6.2-1.1.8-1.2.7-.2 1.5-.3 2.3-.3 7.5 0 11.7 8.2 11.9 8.6.1.3.1.6 0 .9-.6 1.2-1.4 2.3-2.3 3.4-.2.2-.5.4-.8.4-.2 0-.5-.1-.6-.2-.4-.4-.5-1-.1-1.4.7-.8 1.3-1.6 1.8-2.5-.9-1.6-4.5-7-9.9-7-.6 0-1.3.1-1.9.2-.5-.1-1-.4-1.2-.9Zm14.8 19.2c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3l-4.5-4.5C16.1 20.4 14.1 21 12 21 4.5 21 .3 12.8.1 12.4c-.1-.3-.1-.6 0-.9 1.1-2.1 2.7-4 4.5-5.5L.3 1.7C-.1 1.3-.1.7.3.3c.4-.4 1-.4 1.4 0l22 22c.4.4.4 1 0 1.4ZM9.9 12.1c0 .5.2 1 .6 1.4.6.5 1.3.6 2 .4L10 11.4c0 .3-.1.5-.1.7Zm6.5 5.7L14 15.5c-.6.4-1.4.6-2.1.6-1 0-2-.4-2.7-1.1-.8-.7-1.2-1.7-1.3-2.8 0-.8.2-1.6.6-2.3L6 7.4C4.5 8.7 3.2 10.2 2.1 12c.9 1.6 4.5 7 9.9 7 1.5 0 3-.4 4.4-1.2Z" id="a"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g transform="translate(1 1)">
+      <mask id="b" fill="#fff">
+        <use xlink:href="#a"/>
+      </mask>
+      <use fill="#000" fill-rule="nonzero" xlink:href="#a"/>
+      <g mask="url(#b)" fill="#000">
+        <path d="M0 0h24v24H0z"/>
+      </g>
+    </g>
+    <path stroke="#DF5861" stroke-width="2" stroke-linecap="round" d="m1.5 1.5 23 23"/>
+  </g>
+</svg>

data/app/assets/custom_icons/other/google-sso.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <mask id="a" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+  <path fill="#fff" d="M23.182 9.818H12v4.636h6.436c-.6 2.946-3.109 4.637-6.436 4.637A7.077 7.077 0 0 1 4.91 12 7.077 7.077 0 0 1 12 4.91c1.69 0 3.218.6 4.418 1.58L19.91 3C17.782 1.145 15.055 0 12 0 5.345 0 0 5.345 0 12c0 6.654 5.345 12 12 12 6 0 11.454-4.364 11.454-12 0-.71-.108-1.473-.272-2.182Z"/></mask>
+  <g mask="url(#a)">
+    <path fill="#FBBC05" d="M-1.09 19.09V4.91L8.181 12l-9.273 7.09Z"/>
+  </g>
+  <mask id="b" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+  <path fill="#fff" d="M23.182 9.818H12v4.636h6.436c-.6 2.946-3.109 4.637-6.436 4.637A7.077 7.077 0 0 1 4.91 12 7.077 7.077 0 0 1 12 4.91c1.69 0 3.218.6 4.418 1.58L19.91 3C17.782 1.145 15.055 0 12 0 5.345 0 0 5.345 0 12c0 6.654 5.345 12 12 12 6 0 11.454-4.364 11.454-12 0-.71-.108-1.473-.272-2.182Z"/></mask><g mask="url(#b)"><path fill="#EA4335" d="M-1.09 4.91 8.181 12 12 8.673l13.09-2.128V-1.09H-1.09v6Z"/></g><mask id="c" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M23.182 9.818H12v4.636h6.436c-.6 2.946-3.109 4.637-6.436 4.637A7.077 7.077 0 0 1 4.91 12 7.077 7.077 0 0 1 12 4.91c1.69 0 3.218.6 4.418 1.58L19.91 3C17.782 1.145 15.055 0 12 0 5.345 0 0 5.345 0 12c0 6.654 5.345 12 12 12 6 0 11.454-4.364 11.454-12 0-.71-.108-1.473-.272-2.182Z"/></mask><g mask="url(#c)"><path fill="#34A853" d="M-1.09 19.09 15.272 6.546l4.309.546 5.509-8.182v26.182H-1.091v-6Z"/></g><mask id="d" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M23.182 9.818H12v4.636h6.436c-.6 2.946-3.109 4.637-6.436 4.637A7.077 7.077 0 0 1 4.91 12 7.077 7.077 0 0 1 12 4.91c1.69 0 3.218.6 4.418 1.58L19.91 3C17.782 1.145 15.055 0 12 0 5.345 0 0 5.345 0 12c0 6.654 5.345 12 12 12 6 0 11.454-4.364 11.454-12 0-.71-.108-1.473-.272-2.182Z"/></mask><g mask="url(#d)"><path fill="#4285F4" d="M25.09 25.09 8.183 12 6 10.364l19.09-5.455v20.182Z"/></g>
+</svg>

data/app/assets/custom_icons/other/layout-overlay.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill-rule="nonzero" fill="none">
+    <rect stroke="#028871" stroke-width="2" fill="#EBF7F5" x="1" y="1" width="22" height="22" rx="4"/>
+    <rect fill="#028871" x="4" y="9" width="8" height="2" rx="1"/>
+    <rect fill="#028871" x="4" y="13" width="6" height="2" rx="1"/>
+  </g>
+</svg>

data/app/assets/custom_icons/other/layout-split.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill-rule="nonzero" fill="none">
+    <rect stroke="#028871" stroke-width="2" fill="#FAFAFA" x="1" y="1" width="22" height="22" rx="4"/>
+    <rect fill="#028871" opacity=".4" x="12" y="7" width="8" height="10" rx="2"/>
+    <rect fill="#028871" x="4" y="9" width="6" height="2" rx="1"/>
+    <rect fill="#028871" x="4" y="13" width="5" height="2" rx="1"/>
+  </g>
+</svg>

data/app/assets/custom_icons/other/layout-stacked.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill-rule="nonzero" fill="none">
+    <rect stroke="#028871" stroke-width="2" fill="#FAFAFA" x="1" y="1" width="22" height="22" rx="4"/>
+    <rect fill="#028871" x="4.94" y="5.174" width="14" height="2" rx="1"/>
+    <rect fill="#028871" opacity=".4" x="4" y="10" width="16" height="10" rx="2"/>
+  </g>
+</svg>

data/app/assets/custom_icons/other/microsoft-sso.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21">
+  <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
+  <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
+  <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
+  <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
+</svg>

data/app/assets/custom_icons/other/montage.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill-rule="nonzero" fill="none">
+    <path d="M0 0h24v24H0z"/>
+    <g transform="translate(2 2)" stroke="currentColor" stroke-width="2">
+      <rect x="12" y="3" width="7" height="12" rx="2.105"/>
+      <rect x="1" y="1" width="7" height="7" rx="2.105"/>
+      <rect x="1" y="12" width="7" height="7" rx="2.105"/>
+    </g>
+  </g>
+</svg>

data/app/components/coco/app/blocks/slide_editor/slide_editor.css

@@ -87,13 +87,12 @@
       stroke-width: 2px;
     }
 
-    [data-component="app-seamless-textarea"] {
-      textarea {
-        @apply outline outline-1 outline-transparent outline-offset-0 transition-[outline-color] duration-100;
+    .slide-title,
+    .slide-text {
+      @apply outline outline-1 outline-transparent outline-offset-0 transition-[outline-color] duration-100;
 
-        &::placeholder {
-          @apply italic;
-        }
+      textarea::placeholder {
+        @apply italic;
       }
     }
 
@@ -107,14 +106,19 @@
         @apply text-content-dark-1;
       }
 
-      [data-component="app-seamless-textarea"] {
-        textarea {
-          &:hover,
-          &:focus {
-            outline-color: rgba(0, 0, 0, 0.3);
-          }
+      .slide-title,
+      .slide-text {
+        &:hover,
+        &:focus {
+          outline-color: rgba(0, 0, 0, 0.3);
         }
       }
+
+      &[data-placeholders~="title"] [data-role="title"],
+      &[data-placeholders~="text1"] [data-role="text-primary"],
+      &[data-placeholders~="text2"] [data-role="text-secondary"] {
+        outline-color: rgba(0, 0, 0, 0.3) !important;
+      }
     }
 
     .slide-bg-dark {
@@ -127,14 +131,19 @@
         @apply text-content-light-1;
       }
 
-      [data-component="app-seamless-textarea"] {
-        textarea {
-          &:hover,
-          &:focus {
-            outline-color: rgba(255, 255, 255, 0.3);
-          }
+      .slide-title,
+      .slide-text {
+        &:hover,
+        &:focus {
+          outline-color: rgba(255, 255, 255, 0.3);
         }
       }
+
+      &[data-placeholders~="title"] [data-role="title"],
+      &[data-placeholders~="text1"] [data-role="text-primary"],
+      &[data-placeholders~="text2"] [data-role="text-secondary"] {
+        outline-color: rgba(255, 255, 255, 0.3) !important;
+      }
     }
   }
 }

data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb

@@ -156,14 +156,16 @@
     @dragenter.stop.prevent="dragging = true"
     @dragover.stop.prevent="dragging = true"
     @dragleave.stop.prevent="dragging = false"
-    @drop.stop.prevent="handleImageDrop($event)">
+    @drop.stop.prevent="handleImageDrop($event)"
+    @click="handleSlideClick">
     <%= coco_editable_slide(
       **slide_args,
       data: {
         role: "slide"
       },
       x: {
-        bind: "slide"
+        bind: "slide",
+        ":data-placeholders": "blankTextAreasList",
       }
     ) do |slide| %>
       <% if title? %>
@@ -271,7 +273,7 @@
 
           <% if image_1? %>
             <% slide.with_image_1 do %>
-              <div class="editor-thumbnail-image" :style="image2.data && `background-image: url('${image1.data}')`"></div>
+              <div class="editor-thumbnail-image" :style="image1.data && `background-image: url('${image1.data}')`"></div>
             <% end %>
           <% end %>
 

data/app/components/coco/app/blocks/slide_editor/slide_editor.js

@@ -64,6 +64,16 @@ export default CocoComponent("appSlideEditor", (data) => {
 
         this.ready = true;
       });
+
+      this.$watch("history.undoable", (undoable) => {
+        if (undoable) {
+          window.onbeforeunload = () => {
+            return true;
+          };
+        } else {
+          window.onbeforeunload = null;
+        }
+      });
     },
 
     undo(name, value) {
@@ -170,6 +180,19 @@ export default CocoComponent("appSlideEditor", (data) => {
       input.files = dataTransfer.files;
     },
 
+    handleSlideClick(event) {
+      if (Array.from(event.target.classList).includes("slide-text")) {
+        event.target.querySelector("textarea").focus();
+      }
+    },
+
+    get blankTextAreasList() {
+      return ["title", "text1", "text2"]
+        .map((textareaName) => (this[textareaName] === "" ? textareaName : ""))
+        .join(" ")
+        .trim();
+    },
+
     get hasBgImage() {
       return !!(this.bgImage && this.bgImage.data);
     },

data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.js

@@ -31,7 +31,7 @@ export default CocoComponent("appSeamlessTextarea", () => {
         const fontSize = styles.getPropertyValue("font-size");
 
         textarea.style.height = "4px";
-        let newHeight = textarea.scrollHeight - parseInt(fontSize, 10) * 0.16;
+        let newHeight = textarea.scrollHeight;
         textarea.style.height = `${newHeight}px`;
 
         if (this.height !== newHeight) {

data/app/components/coco/base/icon/icon.css

@@ -1,6 +1,6 @@
 @layer components {
   [data-coco][data-component="icon"] {
-    @apply inline-flex flex-none w-6 h-6 text-current;
+    @apply inline-flex flex-none w-6 h-6 text-current overflow-hidden;
 
     svg {
       @apply icon w-full h-full;
@@ -8,7 +8,7 @@
 
     /* Styles */
 
-    &[data-icon]:not([data-style="fill"]) svg {
+    &[data-icon]:not([data-style="fill"]):not([data-style="custom"]) svg {
       @apply icon-stroke;
     }
 
@@ -18,6 +18,10 @@
 
     /* Sizes */
 
+    &[data-size="xs"] {
+      @apply w-3 h-3;
+    }
+
     &[data-size="sm"] {
       @apply w-4 h-4;
     }

data/app/components/coco/base/icon/icon.html.erb

@@ -4,5 +4,5 @@
     data: "icon",
     bind: "root"
   }) do %>
-  <%= content || svg %>
+  <%= svg %>
 <% end %>

data/app/components/coco/base/icon/icon.rb

@@ -6,13 +6,19 @@ module Coco
 
     InvalidIconError = Class.new(StandardError)
 
-    accepts_option :size, from: %i[sm md lg xl xxl]
+    accepts_option :size, from: %i[xs sm md lg xl xxl]
     accepts_option :spin, from: [true, false]
-    accepts_option :style, from: [:line, :fill]
+    accepts_option :style, from: [:line, :fill, :custom]
+
+    before_render do
+      if name
+        set_tag_data_attr(:icon, name)
+        set_option_value(:style, :custom) if icon_data[:custom]
+      end
+    end
 
     def initialize(name: nil, **kwargs)
       @icon_name = name&.to_s&.tr("_", "-")
-      set_tag_data_attr(:icon, name) if name
     end
 
     def name
@@ -20,19 +26,36 @@ module Coco
     end
 
     def svg
-      ICON_CACHE[name] ||= read_svg
+      content || icon_data[:svg]
+    end
+
+    def icon_data
+      ICON_CACHE[name] ||= {
+        custom: custom?,
+        svg: read_svg
+      }
+    end
+
+    def custom?
+      @_custom ||= File.exist?(custom_icon_path)
     end
 
     def read_svg
-      File.read(svg_path).html_safe
-    rescue
-      if Rails.env.development? || Rails.env.test?
+      if custom?
+        File.read(custom_icon_path).html_safe
+      elsif File.exist?(icon_path)
+        File.read(icon_path).html_safe
+      elsif Rails.env.development? || Rails.env.test?
         raise InvalidIconError, "`#{name}` is not a valid icon name"
       end
     end
 
-    def svg_path
-      Coco::Engine.root.join("app/assets/build/coco/icons/#{name}.svg")
+    def icon_path
+      @_icon_path ||= Coco::Engine.root.join("app/assets/build/coco/icons/#{name}.svg")
+    end
+
+    def custom_icon_path
+      @_custom_icon_path ||= Coco::Engine.root.join("app/assets/build/coco/icons/custom/#{name}.svg")
     end
   end
 end