✨ New component icon

CHANGES.md

@@ -32,6 +32,7 @@
 - Add support for local caching of google fonts (this avoids exposing the final user IP to
   goolge and reduces the amount of request sent to google)
 - Set smooth/instant autoscroll depending on distance [GitHub #3377](https://github.com/penpot/penpot/issues/3377)
+- New component icon [Taiga #5290](https://tree.taiga.io/project/penpot/us/5290)
 
 ### :bug: Bugs fixed
 

frontend/resources/images/icons/component-copy.svg

@@ -1,3 +1,3 @@
-<svg viewBox="5576.884 3256.079 14 11.775">
-  <path d="m5590.884 3261.966-3.944 5.888h-6.113l-3.943-5.888 3.943-5.887h6.113l3.944 5.887Zm-9.465 4.883h4.929l3.327-4.871-3.327-4.894h-4.929l-3.327 4.894 3.327 4.871Z" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
+  <path fill="#000" d="M250 0c-10.803 0-21.59 2.77-31.248 8.361L54.698 102.107c-19.336 11.114-31.323 31.833-31.31 54.135v187.551c0 22.286 11.982 42.975 31.31 54.075l164.054 93.745a62.406 62.406 0 0 0 62.496 0l164.054-93.745c19.336-11.114 31.323-31.833 31.31-54.136V156.181c0-22.285-11.982-42.975-31.31-54.074L281.248 8.36C271.59 2.77 260.803 0 250 0Zm-15.624 35.399a31.152 31.152 0 0 1 31.248 0v.06l164.115 93.807c9.648 5.563 15.635 15.775 15.625 26.915v187.612c.006 11.143-5.977 21.347-15.625 26.915l-164.115 93.807v.062a31.152 31.152 0 0 1-31.248 0v-.062L70.26 370.709c-9.648-5.564-15.635-15.776-15.624-26.916V156.181c-.007-11.142 5.976-21.347 15.624-26.915L234.376 35.46Z"/>
+</svg>

frontend/resources/images/icons/component.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
-  <path d="M132.292 66.146l-32.94 65.999H32.94L0 66.145 32.939.148h66.414zm-92.92 54.732H92.92l26.244-54.598L92.92 11.413H39.373L13.128 66.28zM66.147 86.3l18.681-20.02-18.681-20.02-18.682 20.02z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
+  <path d="M250 0c-10.803 0-21.59 2.77-31.248 8.361L54.698 102.107c-19.336 11.113-31.323 31.833-31.31 54.135v187.551c0 22.285 11.982 42.975 31.31 54.075l164.054 93.745a62.406 62.406 0 0 0 62.496 0l164.054-93.745c19.336-11.114 31.323-31.833 31.31-54.136V156.181c0-22.285-11.982-42.975-31.31-54.074L281.248 8.36C271.59 2.77 260.803 0 250 0Zm0 31.187a31.16 31.16 0 0 1 15.624 4.212v.06l164.115 93.807c9.648 5.563 15.635 15.775 15.625 26.915v187.612c.006 11.143-5.977 21.347-15.625 26.915l-164.115 93.807v.062a31.152 31.152 0 0 1-31.248 0v-.062L70.26 370.709c-9.648-5.564-15.635-15.776-15.624-26.916V156.181c-.007-11.142 5.976-21.347 15.624-26.915L234.376 35.46v-.061A31.17 31.17 0 0 1 250 31.187zm.06 64.328a43.52 43.52 0 0 0-21.665 5.798h-.061l-97.224 55.54h-.061c-13.385 7.739-21.656 22.073-21.667 37.534v111.14c-.01 15.478 8.257 29.864 21.667 37.595h.06l97.225 55.539a43.359 43.359 0 0 0 43.332 0l97.224-55.54h.063c13.382-7.738 21.654-22.073 21.665-37.534V194.448c.01-15.479-8.256-29.865-21.667-37.596h-.062l-97.223-55.539a43.118 43.118 0 0 0-21.605-5.798zm-.06 31.249c2.078 0 4.156.558 6.042 1.647h.061l97.224 55.54c3.77 2.173 6.045 6.146 6.042 10.497v111.078c-.003 4.362-2.266 8.314-6.042 10.498l-97.224 55.539h-.06c-3.774 2.178-8.312 2.178-12.085 0h-.061l-97.224-55.54c-3.77-2.172-6.045-6.146-6.042-10.497V194.448c.003-4.362 2.266-8.314 6.042-10.497l97.224-55.54h.06c1.887-1.089 3.965-1.647 6.043-1.647zm0 72.872a22.403 22.403 0 0 0-11.413 3.112l-24.169 13.794-.06.06c-3.381 1.966-6.156 4.8-8.118 8.179a22.173 22.173 0 0 0-3.113 11.352v27.77c0 3.928 1.094 7.764 3.052 11.168 1.973 3.47 4.83 6.388 8.3 8.362l24.352 13.976h.061a22.77 22.77 0 0 0 22.216 0h.06l24.353-13.976c3.47-1.974 6.327-4.892 8.3-8.362 1.984-3.445 3.052-7.343 3.052-11.169v-27.77a22.17 22.17 0 0 0-3.113-11.351c-1.962-3.38-4.737-6.213-8.117-8.178l-.061-.061-24.169-13.794A22.403 22.403 0 0 0 250 199.636zm0 32.59 15.624 8.912v17.699L250 267.809l-15.624-8.972v-17.7z"/>
 </svg>

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -10,6 +10,7 @@
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.pages.helpers :as cph]
+   [app.common.types.component :as ctk]
    [app.common.types.container :as ctn]
    [app.common.types.shape-tree :as ctt]
    [app.common.types.shape.layout :as ctl]
@@ -167,7 +168,9 @@
          (mf/deps (:id frame) on-frame-leave)
          (fn [_]
            (on-frame-leave (:id frame))))
-        text-pos-x (if (or (:use-for-thumbnail? frame) grid-edition?) 15 0)]
+
+        main-instance? (ctk/main-instance? frame)
+        text-pos-x (if (or (:use-for-thumbnail? frame) grid-edition? main-instance?) 15 0)]
 
     (when (not (:hidden frame))
       [:g.frame-title {:id (dm/str "frame-title-" (:id frame))
@@ -175,7 +178,7 @@
                        :transform (vwu/title-transform frame zoom grid-edition?)
                        :pointer-events (when (:blocked frame) "none")}
        (cond
-         (or (:use-for-thumbnail? frame) grid-edition?)
+         (or (:use-for-thumbnail? frame) grid-edition? main-instance?)
          [:svg {:x 0
                 :y -9
                 :width 12
@@ -188,7 +191,10 @@
             [:use {:href "#icon-set-thumbnail"}]
 
             grid-edition?
-            [:use {:href "#icon-grid-layout-mode"}])])
+            [:use {:href "#icon-grid-layout-mode"}]
+
+            main-instance?
+            [:use {:href "#icon-component"}])])
 
        [:text {:x text-pos-x
                :y 0