Add the ability to render external svgs.

frontend/uxbox/library/icons.cljs

@@ -13,7 +13,19 @@
     :data [:path {:d "M38.71 20.07c-1.36-6.88-7.43-12.07-14.71-12.07-5.78 0-10.79 3.28-13.3 8.07-6.01.65-10.7 5.74-10.7 11.93 0 6.63 5.37 12 12 12h26c5.52 0 10-4.48 10-10 0-5.28-4.11-9.56-9.29-9.93z"}]}
    ])
 
+(def ^:private +external+
+  [{:name "Custon icon"
+    :view-box [0 0 50 50]
+    :id :material/foobar
+    :type :builtin/icon-svg
+    :image {:xlink-href "http://s.cdpn.io/3/kiwi.svg"
+            :width 50
+            :height 50}}])
+
 (def +collections+
   [{:name "Material design"
     :id 1
-    :icons +material+}])
+    :icons +material+}
+   {:name "External icons"
+    :id 2
+    :icons +external+}])

frontend/uxbox/shapes.cljs

@@ -24,12 +24,29 @@
     (assoc data :view-box (apply str (interpose " " view-box)))
     data))
 
+(defn extract-attrs
+  "Extract predefinet attrs from shapes."
+  [shape]
+  (select-keys shape [:width :height :view-box :x :y :cx :cy]))
+
 (defmethod -render :builtin/icon
-  [{:keys [data width height view-box] :as shape} attrs]
+  [{:keys [data] :as shape} attrs]
   (let [attrs (as-> shape $
-                (select-keys $ [:width :height :view-box])
+                (extract-attrs $)
                 (remove-nil-vals $)
                 (merge $ attrs)
                 (transform-attrs $))]
     (html
      [:svg attrs data])))
+
+(defmethod -render :builtin/icon-svg
+  [{:keys [image] :as shape} attrs]
+  (let [attrs (as-> shape $
+                (extract-attrs $)
+                (remove-nil-vals $)
+                (merge $ attrs)
+                (transform-attrs $))]
+    (html
+     [:svg attrs
+      [:image image]])))
+

frontend/uxbox/ui/dashboard/icons.cljs

@@ -151,7 +151,7 @@
          (for [icon (:icons coll)]
            [:div.grid-item.small-item.project-th {:key (str (:id icon))}
             [:span.grid-item-image #_i/toggle (shapes/render icon)]
-            [:h3 "Custom icon"]
+            [:h3 (:name icon)]
             #_[:div.project-th-actions
              [:div.project-th-icon.edit i/pencil]
              [:div.project-th-icon.delete i/trash]]])]]))))