@responsive-ui/icon - npm Package Compare versions

Comparing version 1.0.7-alpha.0 to 1.0.9-alpha.1

lib/cjs/index.js

 'use strict';
 
 function noop() { }
+function assign(tar, src) {
+    // @ts-ignore
+    for (const k in src)
+        tar[k] = src[k];
+    return tar;
+}
 function run(fn) {
@@ -22,2 +28,63 @@ return fn();
 }
+function create_slot(definition, ctx, $$scope, fn) {
+    if (definition) {
+        const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
+        return definition[0](slot_ctx);
+    }
+}
+function get_slot_context(definition, ctx, $$scope, fn) {
+    return definition[1] && fn
+        ? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
+        : $$scope.ctx;
+}
+function get_slot_changes(definition, $$scope, dirty, fn) {
+    if (definition[2] && fn) {
+        const lets = definition[2](fn(dirty));
+        if ($$scope.dirty === undefined) {
+            return lets;
+        }
+        if (typeof lets === 'object') {
+            const merged = [];
+            const len = Math.max($$scope.dirty.length, lets.length);
+            for (let i = 0; i < len; i += 1) {
+                merged[i] = $$scope.dirty[i] | lets[i];
+            }
+            return merged;
+        }
+        return $$scope.dirty | lets;
+    }
+    return $$scope.dirty;
+}
+function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
+    if (slot_changes) {
+        const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
+        slot.p(slot_context, slot_changes);
+    }
+}
+function get_all_dirty_from_scope($$scope) {
+    if ($$scope.ctx.length > 32) {
+        const dirty = [];
+        const length = $$scope.ctx.length / 32;
+        for (let i = 0; i < length; i++) {
+            dirty[i] = -1;
+        }
+        return dirty;
+    }
+    return -1;
+}
+function exclude_internal_props(props) {
+    const result = {};
+    for (const k in props)
+        if (k[0] !== '$')
+            result[k] = props[k];
+    return result;
+}
+function compute_rest_props(props, keys) {
+    const rest = {};
+    keys = new Set(keys);
+    for (const k in props)
+        if (!keys.has(k) && k[0] !== '$')
+            rest[k] = props[k];
+    return rest;
+}
 function append(target, node) {
@@ -48,7 +115,15 @@ target.appendChild(node);
 }
+function set_svg_attributes(node, attributes) {
+    for (const key in attributes) {
+        attr(node, key, attributes[key]);
+    }
+}
+function xlink_attr(node, attribute, value) {
+    node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
+}
 function children(element) {
     return Array.from(element.childNodes);
 }
-function set_style(node, key, value, important) {
-    node.style.setProperty(key, value, important ? 'important' : '');
+function toggle_class(element, name, toggle) {
+    element.classList[toggle ? 'add' : 'remove'](name);
 }
@@ -86,13 +161,30 @@
 }
-let flushing = false;
+// flush() calls callbacks in this order:
+// 1. All beforeUpdate callbacks, in order: parents before children
+// 2. All bind:this callbacks, in reverse order: children before parents.
+// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+//    for afterUpdates called during the initial onMount, which are called in
+//    reverse order: children before parents.
+// Since callbacks might update component values, which could trigger another
+// call to flush(), the following steps guard against this:
+// 1. During beforeUpdate, any updated components will be added to the
+//    dirty_components array and will cause a reentrant call to flush(). Because
+//    the flush index is kept outside the function, the reentrant call will pick
+//    up where the earlier call left off and go through all dirty components. The
+//    current_component value is saved and restored so that the reentrant call will
+//    not interfere with the "parent" flush() call.
+// 2. bind:this callbacks cannot trigger new flush() calls.
+// 3. During afterUpdate, any updated components will NOT have their afterUpdate
+//    callback called a second time; the seen_callbacks set, outside the flush()
+//    function, guarantees this behavior.
 const seen_callbacks = new Set();
+let flushidx = 0; // Do *not* move this inside the flush() function
 function flush() {
-    if (flushing)
-        return;
-    flushing = true;
+    const saved_component = current_component;
     do {
         // first, call beforeUpdate functions
         // and update components
-        for (let i = 0; i < dirty_components.length; i += 1) {
-            const component = dirty_components[i];
+        while (flushidx < dirty_components.length) {
+            const component = dirty_components[flushidx];
+            flushidx++;
             set_current_component(component);
@@ -103,2 +195,3 @@ update(component.$$);
         dirty_components.length = 0;
+        flushidx = 0;
         while (binding_callbacks.length)
@@ -123,4 +216,4 @@ binding_callbacks.pop()();
     update_scheduled = false;
-    flushing = false;
     seen_callbacks.clear();
+    set_current_component(saved_component);
 }
@@ -138,2 +231,3 @@ function update($$) {
 const outroing = new Set();
+let outros;
 function transition_in(block, local) {
@@ -145,2 +239,52 @@ if (block && block.i) {
 }
+function transition_out(block, local, detach, callback) {
+    if (block && block.o) {
+        if (outroing.has(block))
+            return;
+        outroing.add(block);
+        outros.c.push(() => {
+            outroing.delete(block);
+            if (callback) {
+                if (detach)
+                    block.d(1);
+                callback();
+            }
+        });
+        block.o(local);
+    }
+}
+
+function get_spread_update(levels, updates) {
+    const update = {};
+    const to_null_out = {};
+    const accounted_for = { $$scope: 1 };
+    let i = levels.length;
+    while (i--) {
+        const o = levels[i];
+        const n = updates[i];
+        if (n) {
+            for (const key in o) {
+                if (!(key in n))
+                    to_null_out[key] = 1;
+            }
+            for (const key in n) {
+                if (!accounted_for[key]) {
+                    update[key] = n[key];
+                    accounted_for[key] = 1;
+                }
+            }
+            levels[i] = n;
+        }
+        else {
+            for (const key in o) {
+                accounted_for[key] = 1;
+            }
+        }
+    }
+    for (const key in to_null_out) {
+        if (!(key in update))
+            update[key] = undefined;
+    }
+    return update;
+}
 function mount_component(component, target, anchor, customElement) {
@@ -272,110 +416,32 @@ const { fragment, on_mount, on_destroy, after_update } = component.$$;
 
-/* components/icon/src/Icon.svelte generated by Svelte v3.44.0 */
+/* components/icon/src/Icon.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_5(ctx) {
+function fallback_block(ctx) {
 	let svg;
-	let path;
+	let use;
+	let svg_levels = [/*$$restProps*/ ctx[5]];
+	let svg_data = {};
 
-	return {
-		c() {
-			svg = svg_element("svg");
-			path = svg_element("path");
-			attr(path, "d", "M1.119 16.841a1.118 1.118 0 01-1.111-1.127c0-.619.492-1.111\n      1.111-1.111h13.475V1.127A1.133 1.133 0 0115.722 0c.619 0 1.111.508 1.111\n      1.127v13.476h13.475c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127\n      1.127H16.833v13.476c0 .619-.492 1.127-1.111 1.127a1.131 1.131 0\n      01-1.127-1.127V16.841H1.119z");
-			attr(path, "fill", /*stroke*/ ctx[0]);
-			attr(svg, "version", "1.1");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "x", "0");
-			attr(svg, "y", "0");
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 31.444 31.444");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
-		},
-		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, path);
-		},
-		p(ctx, dirty) {
-			if (dirty & /*stroke*/ 1) {
-				attr(path, "fill", /*stroke*/ ctx[0]);
-			}
-		},
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
+	for (let i = 0; i < svg_levels.length; i += 1) {
+		svg_data = assign(svg_data, svg_levels[i]);
+	}
 
-// (82:28) 
-function create_if_block_4(ctx) {
-	let svg;
-	let path;
-
 	return {
 		c() {
 			svg = svg_element("svg");
-			path = svg_element("path");
-			attr(path, "d", "M1.111 16.832A1.117 1.117 0 010 15.706c0-.619.492-1.111\n    1.111-1.111H30.3c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127\n    1.127H1.111z");
-			attr(path, "fill", /*stroke*/ ctx[0]);
-			attr(svg, "version", "1.1");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "x", "0");
-			attr(svg, "y", "0");
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 31.427 31.427");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
+			use = svg_element("use");
+			xlink_attr(use, "xlink:href", /*useHref*/ ctx[3]);
+			set_svg_attributes(svg, svg_data);
 		},
 		m(target, anchor) {
 			insert(target, svg, anchor);
-			append(svg, path);
+			append(svg, use);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*stroke*/ 1) {
-				attr(path, "fill", /*stroke*/ ctx[0]);
+			if (dirty & /*useHref*/ 8) {
+				xlink_attr(use, "xlink:href", /*useHref*/ ctx[3]);
 			}
-		},
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
 
-// (61:35) 
-function create_if_block_3(ctx) {
-	let svg;
-	let g;
-	let path;
-
-	return {
-		c() {
-			svg = svg_element("svg");
-			g = svg_element("g");
-			path = svg_element("path");
-			attr(path, "d", "M617.858,370.896L221.513,9.705c-13.006-12.94-34.099-12.94-47.105,0c-13.006,12.939-13.006,33.934,0,46.874\n         l372.447,339.438L174.441,735.454c-13.006,12.94-13.006,33.935,0,46.874s34.099,12.939,47.104,0l396.346-361.191\n         c6.932-6.898,9.904-16.043,9.441-25.087C627.763,386.972,624.792,377.828,617.858,370.896z");
-			attr(svg, "version", "1.1");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-			attr(svg, "x", "0px");
-			attr(svg, "y", "0px");
-			attr(svg, "stroke", /*stroke*/ ctx[0]);
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 792.033 792.033");
-			set_style(svg, "enable-background", "new 0 0 792.033 792.033");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
+			set_svg_attributes(svg, svg_data = get_spread_update(svg_levels, [dirty & /*$$restProps*/ 32 && /*$$restProps*/ ctx[5]]));
 		},
-		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, g);
-			append(g, path);
-		},
-		p(ctx, dirty) {
-			if (dirty & /*stroke*/ 1) {
-				attr(svg, "stroke", /*stroke*/ ctx[0]);
-			}
-		},
 		d(detaching) {
@@ -387,206 +453,31 @@ if (detaching) detach(svg);
 
-// (45:28) 
-function create_if_block_2(ctx) {
-	let svg;
-	let g;
-	let circle0;
-	let circle1;
-	let circle2;
+function create_fragment(ctx) {
+	let i;
+	let i_class_value;
+	let current;
+	let mounted;
+	let dispose;
+	const default_slot_template = /*#slots*/ ctx[7].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
+	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
 	return {
 		c() {
-			svg = svg_element("svg");
-			g = svg_element("g");
-			circle0 = svg_element("circle");
-			circle1 = svg_element("circle");
-			circle2 = svg_element("circle");
-			attr(circle0, "cx", "42.667");
-			attr(circle0, "cy", "213.333");
-			attr(circle0, "r", "42.667");
-			attr(circle1, "cx", "213.333");
-			attr(circle1, "cy", "213.333");
-			attr(circle1, "r", "42.667");
-			attr(circle2, "cx", "384");
-			attr(circle2, "cy", "213.333");
-			attr(circle2, "r", "42.667");
-			attr(svg, "version", "1.1");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 426.667 426.667");
-			set_style(svg, "enable-background", "new 0 0 426.667 426.667");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
+			i = element("i");
+			if (default_slot_or_fallback) default_slot_or_fallback.c();
+			attr(i, "class", i_class_value = "resp-icon resp-icon--" + /*sizeOf*/ ctx[2] + " " + /*className*/ ctx[0]);
+			attr(i, "style", /*style*/ ctx[4]);
+			toggle_class(i, "resp-icon--clickable", /*clickable*/ ctx[1]);
 		},
 		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, g);
-			append(g, circle0);
-			append(g, circle1);
-			append(g, circle2);
-		},
-		p: noop,
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
+			insert(target, i, anchor);
 
-// (26:30) 
-function create_if_block_1(ctx) {
-	let svg;
-	let line0;
-	let line1;
-	let line2;
-	let line3;
-	let line4;
-	let line5;
-	let line6;
-	let line7;
-	let line8;
-
-	return {
-		c() {
-			svg = svg_element("svg");
-			line0 = svg_element("line");
-			line1 = svg_element("line");
-			line2 = svg_element("line");
-			line3 = svg_element("line");
-			line4 = svg_element("line");
-			line5 = svg_element("line");
-			line6 = svg_element("line");
-			line7 = svg_element("line");
-			line8 = svg_element("line");
-			attr(line0, "x1", "4");
-			attr(line0, "y1", "21");
-			attr(line0, "x2", "4");
-			attr(line0, "y2", "14");
-			attr(line1, "x1", "4");
-			attr(line1, "y1", "10");
-			attr(line1, "x2", "4");
-			attr(line1, "y2", "3");
-			attr(line2, "x1", "12");
-			attr(line2, "y1", "21");
-			attr(line2, "x2", "12");
-			attr(line2, "y2", "12");
-			attr(line3, "x1", "12");
-			attr(line3, "y1", "8");
-			attr(line3, "x2", "12");
-			attr(line3, "y2", "3");
-			attr(line4, "x1", "20");
-			attr(line4, "y1", "21");
-			attr(line4, "x2", "20");
-			attr(line4, "y2", "16");
-			attr(line5, "x1", "20");
-			attr(line5, "y1", "12");
-			attr(line5, "x2", "20");
-			attr(line5, "y2", "3");
-			attr(line6, "x1", "1");
-			attr(line6, "y1", "14");
-			attr(line6, "x2", "7");
-			attr(line6, "y2", "14");
-			attr(line7, "x1", "9");
-			attr(line7, "y1", "8");
-			attr(line7, "x2", "15");
-			attr(line7, "y2", "8");
-			attr(line8, "x1", "17");
-			attr(line8, "y1", "16");
-			attr(line8, "x2", "23");
-			attr(line8, "y2", "16");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "viewBox", "0 0 24 24");
-			attr(svg, "fill", "none");
-			attr(svg, "stroke", /*stroke*/ ctx[0]);
-			attr(svg, "stroke-width", "2");
-			attr(svg, "stroke-linecap", "round");
-			attr(svg, "stroke-linejoin", "round");
-			attr(svg, "class", "svelte-2o8tyv");
-		},
-		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, line0);
-			append(svg, line1);
-			append(svg, line2);
-			append(svg, line3);
-			append(svg, line4);
-			append(svg, line5);
-			append(svg, line6);
-			append(svg, line7);
-			append(svg, line8);
-		},
-		p(ctx, dirty) {
-			if (dirty & /*stroke*/ 1) {
-				attr(svg, "stroke", /*stroke*/ ctx[0]);
+			if (default_slot_or_fallback) {
+				default_slot_or_fallback.m(i, null);
 			}
-		},
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
 
-// (7:2) {#if type === "x"}
-function create_if_block(ctx) {
-	let svg;
-	let g;
-	let path;
+			current = true;
 
-	return {
-		c() {
-			svg = svg_element("svg");
-			g = svg_element("g");
-			path = svg_element("path");
-			attr(path, "d", "M228.929,205.01L404.596,29.343c6.78-6.548,6.968-17.352,0.42-24.132c-6.548-6.78-17.352-6.968-24.132-0.42\n     c-0.142,0.137-0.282,0.277-0.42,0.42L204.796,180.878L29.129,5.21c-6.78-6.548-17.584-6.36-24.132,0.42\n     c-6.388,6.614-6.388,17.099,0,23.713L180.664,205.01L4.997,380.677c-6.663,6.664-6.663,17.468,0,24.132\n     c6.664,6.662,17.468,6.662,24.132,0l175.667-175.667l175.667,175.667c6.78,6.548,17.584,6.36,24.132-0.42\n     c6.387-6.614,6.387-17.099,0-23.712L228.929,205.01z");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-			attr(svg, "x", "0px");
-			attr(svg, "y", "0px");
-			attr(svg, "viewBox", "0 0 408 408");
-			set_style(svg, "enable-background", "new 0 0 408 408");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
-		},
-		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, g);
-			append(g, path);
-		},
-		p: noop,
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
-
-function create_fragment(ctx) {
-	let span;
-	let mounted;
-	let dispose;
-
-	function select_block_type(ctx, dirty) {
-		if (/*type*/ ctx[1] === "x") return create_if_block;
-		if (/*type*/ ctx[1] === "filter") return create_if_block_1;
-		if (/*type*/ ctx[1] === "more") return create_if_block_2;
-		if (/*type*/ ctx[1] === "right-arrow") return create_if_block_3;
-		if (/*type*/ ctx[1] == "minus") return create_if_block_4;
-		if (/*type*/ ctx[1] == "plus") return create_if_block_5;
-	}
-
-	let current_block_type = select_block_type(ctx);
-	let if_block = current_block_type && current_block_type(ctx);
-
-	return {
-		c() {
-			span = element("span");
-			if (if_block) if_block.c();
-			attr(span, "class", "responsive-ui-icon svelte-2o8tyv");
-			attr(span, "style", /*style*/ ctx[2]);
-		},
-		m(target, anchor) {
-			insert(target, span, anchor);
-			if (if_block) if_block.m(span, null);
-
 			if (!mounted) {
-				dispose = listen(span, "click", /*click_handler*/ ctx[3]);
+				dispose = listen(i, "click", /*click_handler*/ ctx[8]);
 				mounted = true;
@@ -596,27 +487,45 @@ }
 		p(ctx, [dirty]) {
-			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
-				if_block.p(ctx, dirty);
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[6],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[6])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[6], dirty, null),
+						null
+					);
+				}
 			} else {
-				if (if_block) if_block.d(1);
-				if_block = current_block_type && current_block_type(ctx);
-
-				if (if_block) {
-					if_block.c();
-					if_block.m(span, null);
+				if (default_slot_or_fallback && default_slot_or_fallback.p && (!current || dirty & /*$$restProps, useHref*/ 40)) {
+					default_slot_or_fallback.p(ctx, !current ? -1 : dirty);
 				}
 			}
 
-			if (dirty & /*style*/ 4) {
-				attr(span, "style", /*style*/ ctx[2]);
+			if (!current || dirty & /*sizeOf, className*/ 5 && i_class_value !== (i_class_value = "resp-icon resp-icon--" + /*sizeOf*/ ctx[2] + " " + /*className*/ ctx[0])) {
+				attr(i, "class", i_class_value);
 			}
-		},
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(span);
 
-			if (if_block) {
-				if_block.d();
+			if (!current || dirty & /*style*/ 16) {
+				attr(i, "style", /*style*/ ctx[4]);
 			}
 
+			if (dirty & /*sizeOf, className, clickable*/ 7) {
+				toggle_class(i, "resp-icon--clickable", /*clickable*/ ctx[1]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot_or_fallback, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot_or_fallback, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(i);
+			if (default_slot_or_fallback) default_slot_or_fallback.d(detaching);
 			mounted = false;
@@ -629,4 +538,9 @@ dispose();
 function instance($$self, $$props, $$invalidate) {
-	let { stroke = "#000" } = $$props;
-	let { type = "" } = $$props;
+	const omit_props_names = ["class","clickable","sizeOf","useHref","style"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { $$slots: slots = {}, $$scope } = $$props;
+	let { class: className = "" } = $$props;
+	let { clickable = false } = $$props;
+	let { sizeOf = "sm" } = $$props;
+	let { useHref = "" } = $$props;
 	let { style = "" } = $$props;
@@ -638,9 +552,24 @@
 
-	$$self.$$set = $$props => {
-		if ('stroke' in $$props) $$invalidate(0, stroke = $$props.stroke);
-		if ('type' in $$props) $$invalidate(1, type = $$props.type);
-		if ('style' in $$props) $$invalidate(2, style = $$props.style);
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(5, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('class' in $$new_props) $$invalidate(0, className = $$new_props.class);
+		if ('clickable' in $$new_props) $$invalidate(1, clickable = $$new_props.clickable);
+		if ('sizeOf' in $$new_props) $$invalidate(2, sizeOf = $$new_props.sizeOf);
+		if ('useHref' in $$new_props) $$invalidate(3, useHref = $$new_props.useHref);
+		if ('style' in $$new_props) $$invalidate(4, style = $$new_props.style);
+		if ('$$scope' in $$new_props) $$invalidate(6, $$scope = $$new_props.$$scope);
 	};
 
-	return [stroke, type, style, click_handler];
+	return [
+		className,
+		clickable,
+		sizeOf,
+		useHref,
+		style,
+		$$restProps,
+		$$scope,
+		slots,
+		click_handler
+	];
 }
@@ -651,3 +580,10 @@
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { stroke: 0, type: 1, style: 2 });
+
+		init(this, options, instance, create_fragment, safe_not_equal, {
+			class: 0,
+			clickable: 1,
+			sizeOf: 2,
+			useHref: 3,
+			style: 4
+		});
 	}
@@ -654,0 +590,0 @@ }

lib/esm/index.js

 function noop() { }
+function assign(tar, src) {
+    // @ts-ignore
+    for (const k in src)
+        tar[k] = src[k];
+    return tar;
+}
 function run(fn) {
@@ -20,2 +26,63 @@ return fn();
 }
+function create_slot(definition, ctx, $$scope, fn) {
+    if (definition) {
+        const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
+        return definition[0](slot_ctx);
+    }
+}
+function get_slot_context(definition, ctx, $$scope, fn) {
+    return definition[1] && fn
+        ? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
+        : $$scope.ctx;
+}
+function get_slot_changes(definition, $$scope, dirty, fn) {
+    if (definition[2] && fn) {
+        const lets = definition[2](fn(dirty));
+        if ($$scope.dirty === undefined) {
+            return lets;
+        }
+        if (typeof lets === 'object') {
+            const merged = [];
+            const len = Math.max($$scope.dirty.length, lets.length);
+            for (let i = 0; i < len; i += 1) {
+                merged[i] = $$scope.dirty[i] | lets[i];
+            }
+            return merged;
+        }
+        return $$scope.dirty | lets;
+    }
+    return $$scope.dirty;
+}
+function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
+    if (slot_changes) {
+        const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
+        slot.p(slot_context, slot_changes);
+    }
+}
+function get_all_dirty_from_scope($$scope) {
+    if ($$scope.ctx.length > 32) {
+        const dirty = [];
+        const length = $$scope.ctx.length / 32;
+        for (let i = 0; i < length; i++) {
+            dirty[i] = -1;
+        }
+        return dirty;
+    }
+    return -1;
+}
+function exclude_internal_props(props) {
+    const result = {};
+    for (const k in props)
+        if (k[0] !== '$')
+            result[k] = props[k];
+    return result;
+}
+function compute_rest_props(props, keys) {
+    const rest = {};
+    keys = new Set(keys);
+    for (const k in props)
+        if (!keys.has(k) && k[0] !== '$')
+            rest[k] = props[k];
+    return rest;
+}
 function append(target, node) {
@@ -46,7 +113,15 @@ target.appendChild(node);
 }
+function set_svg_attributes(node, attributes) {
+    for (const key in attributes) {
+        attr(node, key, attributes[key]);
+    }
+}
+function xlink_attr(node, attribute, value) {
+    node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
+}
 function children(element) {
     return Array.from(element.childNodes);
 }
-function set_style(node, key, value, important) {
-    node.style.setProperty(key, value, important ? 'important' : '');
+function toggle_class(element, name, toggle) {
+    element.classList[toggle ? 'add' : 'remove'](name);
 }
@@ -84,13 +159,30 @@
 }
-let flushing = false;
+// flush() calls callbacks in this order:
+// 1. All beforeUpdate callbacks, in order: parents before children
+// 2. All bind:this callbacks, in reverse order: children before parents.
+// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+//    for afterUpdates called during the initial onMount, which are called in
+//    reverse order: children before parents.
+// Since callbacks might update component values, which could trigger another
+// call to flush(), the following steps guard against this:
+// 1. During beforeUpdate, any updated components will be added to the
+//    dirty_components array and will cause a reentrant call to flush(). Because
+//    the flush index is kept outside the function, the reentrant call will pick
+//    up where the earlier call left off and go through all dirty components. The
+//    current_component value is saved and restored so that the reentrant call will
+//    not interfere with the "parent" flush() call.
+// 2. bind:this callbacks cannot trigger new flush() calls.
+// 3. During afterUpdate, any updated components will NOT have their afterUpdate
+//    callback called a second time; the seen_callbacks set, outside the flush()
+//    function, guarantees this behavior.
 const seen_callbacks = new Set();
+let flushidx = 0; // Do *not* move this inside the flush() function
 function flush() {
-    if (flushing)
-        return;
-    flushing = true;
+    const saved_component = current_component;
     do {
         // first, call beforeUpdate functions
         // and update components
-        for (let i = 0; i < dirty_components.length; i += 1) {
-            const component = dirty_components[i];
+        while (flushidx < dirty_components.length) {
+            const component = dirty_components[flushidx];
+            flushidx++;
             set_current_component(component);
@@ -101,2 +193,3 @@ update(component.$$);
         dirty_components.length = 0;
+        flushidx = 0;
         while (binding_callbacks.length)
@@ -121,4 +214,4 @@ binding_callbacks.pop()();
     update_scheduled = false;
-    flushing = false;
     seen_callbacks.clear();
+    set_current_component(saved_component);
 }
@@ -136,2 +229,3 @@ function update($$) {
 const outroing = new Set();
+let outros;
 function transition_in(block, local) {
@@ -143,2 +237,52 @@ if (block && block.i) {
 }
+function transition_out(block, local, detach, callback) {
+    if (block && block.o) {
+        if (outroing.has(block))
+            return;
+        outroing.add(block);
+        outros.c.push(() => {
+            outroing.delete(block);
+            if (callback) {
+                if (detach)
+                    block.d(1);
+                callback();
+            }
+        });
+        block.o(local);
+    }
+}
+
+function get_spread_update(levels, updates) {
+    const update = {};
+    const to_null_out = {};
+    const accounted_for = { $$scope: 1 };
+    let i = levels.length;
+    while (i--) {
+        const o = levels[i];
+        const n = updates[i];
+        if (n) {
+            for (const key in o) {
+                if (!(key in n))
+                    to_null_out[key] = 1;
+            }
+            for (const key in n) {
+                if (!accounted_for[key]) {
+                    update[key] = n[key];
+                    accounted_for[key] = 1;
+                }
+            }
+            levels[i] = n;
+        }
+        else {
+            for (const key in o) {
+                accounted_for[key] = 1;
+            }
+        }
+    }
+    for (const key in to_null_out) {
+        if (!(key in update))
+            update[key] = undefined;
+    }
+    return update;
+}
 function mount_component(component, target, anchor, customElement) {
@@ -270,110 +414,32 @@ const { fragment, on_mount, on_destroy, after_update } = component.$$;
 
-/* components/icon/src/Icon.svelte generated by Svelte v3.44.0 */
+/* components/icon/src/Icon.svelte generated by Svelte v3.44.3 */
 
-function create_if_block_5(ctx) {
+function fallback_block(ctx) {
 	let svg;
-	let path;
+	let use;
+	let svg_levels = [/*$$restProps*/ ctx[5]];
+	let svg_data = {};
 
-	return {
-		c() {
-			svg = svg_element("svg");
-			path = svg_element("path");
-			attr(path, "d", "M1.119 16.841a1.118 1.118 0 01-1.111-1.127c0-.619.492-1.111\n      1.111-1.111h13.475V1.127A1.133 1.133 0 0115.722 0c.619 0 1.111.508 1.111\n      1.127v13.476h13.475c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127\n      1.127H16.833v13.476c0 .619-.492 1.127-1.111 1.127a1.131 1.131 0\n      01-1.127-1.127V16.841H1.119z");
-			attr(path, "fill", /*stroke*/ ctx[0]);
-			attr(svg, "version", "1.1");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "x", "0");
-			attr(svg, "y", "0");
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 31.444 31.444");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
-		},
-		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, path);
-		},
-		p(ctx, dirty) {
-			if (dirty & /*stroke*/ 1) {
-				attr(path, "fill", /*stroke*/ ctx[0]);
-			}
-		},
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
+	for (let i = 0; i < svg_levels.length; i += 1) {
+		svg_data = assign(svg_data, svg_levels[i]);
+	}
 
-// (82:28) 
-function create_if_block_4(ctx) {
-	let svg;
-	let path;
-
 	return {
 		c() {
 			svg = svg_element("svg");
-			path = svg_element("path");
-			attr(path, "d", "M1.111 16.832A1.117 1.117 0 010 15.706c0-.619.492-1.111\n    1.111-1.111H30.3c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127\n    1.127H1.111z");
-			attr(path, "fill", /*stroke*/ ctx[0]);
-			attr(svg, "version", "1.1");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "x", "0");
-			attr(svg, "y", "0");
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 31.427 31.427");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
+			use = svg_element("use");
+			xlink_attr(use, "xlink:href", /*useHref*/ ctx[3]);
+			set_svg_attributes(svg, svg_data);
 		},
 		m(target, anchor) {
 			insert(target, svg, anchor);
-			append(svg, path);
+			append(svg, use);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*stroke*/ 1) {
-				attr(path, "fill", /*stroke*/ ctx[0]);
+			if (dirty & /*useHref*/ 8) {
+				xlink_attr(use, "xlink:href", /*useHref*/ ctx[3]);
 			}
-		},
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
 
-// (61:35) 
-function create_if_block_3(ctx) {
-	let svg;
-	let g;
-	let path;
-
-	return {
-		c() {
-			svg = svg_element("svg");
-			g = svg_element("g");
-			path = svg_element("path");
-			attr(path, "d", "M617.858,370.896L221.513,9.705c-13.006-12.94-34.099-12.94-47.105,0c-13.006,12.939-13.006,33.934,0,46.874\n         l372.447,339.438L174.441,735.454c-13.006,12.94-13.006,33.935,0,46.874s34.099,12.939,47.104,0l396.346-361.191\n         c6.932-6.898,9.904-16.043,9.441-25.087C627.763,386.972,624.792,377.828,617.858,370.896z");
-			attr(svg, "version", "1.1");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-			attr(svg, "x", "0px");
-			attr(svg, "y", "0px");
-			attr(svg, "stroke", /*stroke*/ ctx[0]);
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 792.033 792.033");
-			set_style(svg, "enable-background", "new 0 0 792.033 792.033");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
+			set_svg_attributes(svg, svg_data = get_spread_update(svg_levels, [dirty & /*$$restProps*/ 32 && /*$$restProps*/ ctx[5]]));
 		},
-		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, g);
-			append(g, path);
-		},
-		p(ctx, dirty) {
-			if (dirty & /*stroke*/ 1) {
-				attr(svg, "stroke", /*stroke*/ ctx[0]);
-			}
-		},
 		d(detaching) {
@@ -385,206 +451,31 @@ if (detaching) detach(svg);
 
-// (45:28) 
-function create_if_block_2(ctx) {
-	let svg;
-	let g;
-	let circle0;
-	let circle1;
-	let circle2;
+function create_fragment(ctx) {
+	let i;
+	let i_class_value;
+	let current;
+	let mounted;
+	let dispose;
+	const default_slot_template = /*#slots*/ ctx[7].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
+	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
 	return {
 		c() {
-			svg = svg_element("svg");
-			g = svg_element("g");
-			circle0 = svg_element("circle");
-			circle1 = svg_element("circle");
-			circle2 = svg_element("circle");
-			attr(circle0, "cx", "42.667");
-			attr(circle0, "cy", "213.333");
-			attr(circle0, "r", "42.667");
-			attr(circle1, "cx", "213.333");
-			attr(circle1, "cy", "213.333");
-			attr(circle1, "r", "42.667");
-			attr(circle2, "cx", "384");
-			attr(circle2, "cy", "213.333");
-			attr(circle2, "r", "42.667");
-			attr(svg, "version", "1.1");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-			attr(svg, "width", "100%");
-			attr(svg, "height", "100%");
-			attr(svg, "viewBox", "0 0 426.667 426.667");
-			set_style(svg, "enable-background", "new 0 0 426.667 426.667");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
+			i = element("i");
+			if (default_slot_or_fallback) default_slot_or_fallback.c();
+			attr(i, "class", i_class_value = "resp-icon resp-icon--" + /*sizeOf*/ ctx[2] + " " + /*className*/ ctx[0]);
+			attr(i, "style", /*style*/ ctx[4]);
+			toggle_class(i, "resp-icon--clickable", /*clickable*/ ctx[1]);
 		},
 		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, g);
-			append(g, circle0);
-			append(g, circle1);
-			append(g, circle2);
-		},
-		p: noop,
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
+			insert(target, i, anchor);
 
-// (26:30) 
-function create_if_block_1(ctx) {
-	let svg;
-	let line0;
-	let line1;
-	let line2;
-	let line3;
-	let line4;
-	let line5;
-	let line6;
-	let line7;
-	let line8;
-
-	return {
-		c() {
-			svg = svg_element("svg");
-			line0 = svg_element("line");
-			line1 = svg_element("line");
-			line2 = svg_element("line");
-			line3 = svg_element("line");
-			line4 = svg_element("line");
-			line5 = svg_element("line");
-			line6 = svg_element("line");
-			line7 = svg_element("line");
-			line8 = svg_element("line");
-			attr(line0, "x1", "4");
-			attr(line0, "y1", "21");
-			attr(line0, "x2", "4");
-			attr(line0, "y2", "14");
-			attr(line1, "x1", "4");
-			attr(line1, "y1", "10");
-			attr(line1, "x2", "4");
-			attr(line1, "y2", "3");
-			attr(line2, "x1", "12");
-			attr(line2, "y1", "21");
-			attr(line2, "x2", "12");
-			attr(line2, "y2", "12");
-			attr(line3, "x1", "12");
-			attr(line3, "y1", "8");
-			attr(line3, "x2", "12");
-			attr(line3, "y2", "3");
-			attr(line4, "x1", "20");
-			attr(line4, "y1", "21");
-			attr(line4, "x2", "20");
-			attr(line4, "y2", "16");
-			attr(line5, "x1", "20");
-			attr(line5, "y1", "12");
-			attr(line5, "x2", "20");
-			attr(line5, "y2", "3");
-			attr(line6, "x1", "1");
-			attr(line6, "y1", "14");
-			attr(line6, "x2", "7");
-			attr(line6, "y2", "14");
-			attr(line7, "x1", "9");
-			attr(line7, "y1", "8");
-			attr(line7, "x2", "15");
-			attr(line7, "y2", "8");
-			attr(line8, "x1", "17");
-			attr(line8, "y1", "16");
-			attr(line8, "x2", "23");
-			attr(line8, "y2", "16");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "viewBox", "0 0 24 24");
-			attr(svg, "fill", "none");
-			attr(svg, "stroke", /*stroke*/ ctx[0]);
-			attr(svg, "stroke-width", "2");
-			attr(svg, "stroke-linecap", "round");
-			attr(svg, "stroke-linejoin", "round");
-			attr(svg, "class", "svelte-2o8tyv");
-		},
-		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, line0);
-			append(svg, line1);
-			append(svg, line2);
-			append(svg, line3);
-			append(svg, line4);
-			append(svg, line5);
-			append(svg, line6);
-			append(svg, line7);
-			append(svg, line8);
-		},
-		p(ctx, dirty) {
-			if (dirty & /*stroke*/ 1) {
-				attr(svg, "stroke", /*stroke*/ ctx[0]);
+			if (default_slot_or_fallback) {
+				default_slot_or_fallback.m(i, null);
 			}
-		},
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
 
-// (7:2) {#if type === "x"}
-function create_if_block(ctx) {
-	let svg;
-	let g;
-	let path;
+			current = true;
 
-	return {
-		c() {
-			svg = svg_element("svg");
-			g = svg_element("g");
-			path = svg_element("path");
-			attr(path, "d", "M228.929,205.01L404.596,29.343c6.78-6.548,6.968-17.352,0.42-24.132c-6.548-6.78-17.352-6.968-24.132-0.42\n     c-0.142,0.137-0.282,0.277-0.42,0.42L204.796,180.878L29.129,5.21c-6.78-6.548-17.584-6.36-24.132,0.42\n     c-6.388,6.614-6.388,17.099,0,23.713L180.664,205.01L4.997,380.677c-6.663,6.664-6.663,17.468,0,24.132\n     c6.664,6.662,17.468,6.662,24.132,0l175.667-175.667l175.667,175.667c6.78,6.548,17.584,6.36,24.132-0.42\n     c6.387-6.614,6.387-17.099,0-23.712L228.929,205.01z");
-			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-			attr(svg, "x", "0px");
-			attr(svg, "y", "0px");
-			attr(svg, "viewBox", "0 0 408 408");
-			set_style(svg, "enable-background", "new 0 0 408 408");
-			attr(svg, "xml:space", "preserve");
-			attr(svg, "class", "svelte-2o8tyv");
-		},
-		m(target, anchor) {
-			insert(target, svg, anchor);
-			append(svg, g);
-			append(g, path);
-		},
-		p: noop,
-		d(detaching) {
-			if (detaching) detach(svg);
-		}
-	};
-}
-
-function create_fragment(ctx) {
-	let span;
-	let mounted;
-	let dispose;
-
-	function select_block_type(ctx, dirty) {
-		if (/*type*/ ctx[1] === "x") return create_if_block;
-		if (/*type*/ ctx[1] === "filter") return create_if_block_1;
-		if (/*type*/ ctx[1] === "more") return create_if_block_2;
-		if (/*type*/ ctx[1] === "right-arrow") return create_if_block_3;
-		if (/*type*/ ctx[1] == "minus") return create_if_block_4;
-		if (/*type*/ ctx[1] == "plus") return create_if_block_5;
-	}
-
-	let current_block_type = select_block_type(ctx);
-	let if_block = current_block_type && current_block_type(ctx);
-
-	return {
-		c() {
-			span = element("span");
-			if (if_block) if_block.c();
-			attr(span, "class", "responsive-ui-icon svelte-2o8tyv");
-			attr(span, "style", /*style*/ ctx[2]);
-		},
-		m(target, anchor) {
-			insert(target, span, anchor);
-			if (if_block) if_block.m(span, null);
-
 			if (!mounted) {
-				dispose = listen(span, "click", /*click_handler*/ ctx[3]);
+				dispose = listen(i, "click", /*click_handler*/ ctx[8]);
 				mounted = true;
@@ -594,27 +485,45 @@ }
 		p(ctx, [dirty]) {
-			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
-				if_block.p(ctx, dirty);
+			if (default_slot) {
+				if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[6],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[6])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[6], dirty, null),
+						null
+					);
+				}
 			} else {
-				if (if_block) if_block.d(1);
-				if_block = current_block_type && current_block_type(ctx);
-
-				if (if_block) {
-					if_block.c();
-					if_block.m(span, null);
+				if (default_slot_or_fallback && default_slot_or_fallback.p && (!current || dirty & /*$$restProps, useHref*/ 40)) {
+					default_slot_or_fallback.p(ctx, !current ? -1 : dirty);
 				}
 			}
 
-			if (dirty & /*style*/ 4) {
-				attr(span, "style", /*style*/ ctx[2]);
+			if (!current || dirty & /*sizeOf, className*/ 5 && i_class_value !== (i_class_value = "resp-icon resp-icon--" + /*sizeOf*/ ctx[2] + " " + /*className*/ ctx[0])) {
+				attr(i, "class", i_class_value);
 			}
-		},
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(span);
 
-			if (if_block) {
-				if_block.d();
+			if (!current || dirty & /*style*/ 16) {
+				attr(i, "style", /*style*/ ctx[4]);
 			}
 
+			if (dirty & /*sizeOf, className, clickable*/ 7) {
+				toggle_class(i, "resp-icon--clickable", /*clickable*/ ctx[1]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(default_slot_or_fallback, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(default_slot_or_fallback, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(i);
+			if (default_slot_or_fallback) default_slot_or_fallback.d(detaching);
 			mounted = false;
@@ -627,4 +536,9 @@ dispose();
 function instance($$self, $$props, $$invalidate) {
-	let { stroke = "#000" } = $$props;
-	let { type = "" } = $$props;
+	const omit_props_names = ["class","clickable","sizeOf","useHref","style"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { $$slots: slots = {}, $$scope } = $$props;
+	let { class: className = "" } = $$props;
+	let { clickable = false } = $$props;
+	let { sizeOf = "sm" } = $$props;
+	let { useHref = "" } = $$props;
 	let { style = "" } = $$props;
@@ -636,9 +550,24 @@
 
-	$$self.$$set = $$props => {
-		if ('stroke' in $$props) $$invalidate(0, stroke = $$props.stroke);
-		if ('type' in $$props) $$invalidate(1, type = $$props.type);
-		if ('style' in $$props) $$invalidate(2, style = $$props.style);
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(5, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('class' in $$new_props) $$invalidate(0, className = $$new_props.class);
+		if ('clickable' in $$new_props) $$invalidate(1, clickable = $$new_props.clickable);
+		if ('sizeOf' in $$new_props) $$invalidate(2, sizeOf = $$new_props.sizeOf);
+		if ('useHref' in $$new_props) $$invalidate(3, useHref = $$new_props.useHref);
+		if ('style' in $$new_props) $$invalidate(4, style = $$new_props.style);
+		if ('$$scope' in $$new_props) $$invalidate(6, $$scope = $$new_props.$$scope);
 	};
 
-	return [stroke, type, style, click_handler];
+	return [
+		className,
+		clickable,
+		sizeOf,
+		useHref,
+		style,
+		$$restProps,
+		$$scope,
+		slots,
+		click_handler
+	];
 }
@@ -649,3 +578,10 @@
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { stroke: 0, type: 1, style: 2 });
+
+		init(this, options, instance, create_fragment, safe_not_equal, {
+			class: 0,
+			clickable: 1,
+			sizeOf: 2,
+			useHref: 3,
+			style: 4
+		});
 	}
@@ -652,0 +588,0 @@ }

lib/index.js

@@ -5,2 +5,8 @@ var Icon = (function () {
     function noop() { }
+    function assign(tar, src) {
+        // @ts-ignore
+        for (const k in src)
+            tar[k] = src[k];
+        return tar;
+    }
     function run(fn) {
@@ -24,2 +30,63 @@ return fn();
     }
+    function create_slot(definition, ctx, $$scope, fn) {
+        if (definition) {
+            const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
+            return definition[0](slot_ctx);
+        }
+    }
+    function get_slot_context(definition, ctx, $$scope, fn) {
+        return definition[1] && fn
+            ? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
+            : $$scope.ctx;
+    }
+    function get_slot_changes(definition, $$scope, dirty, fn) {
+        if (definition[2] && fn) {
+            const lets = definition[2](fn(dirty));
+            if ($$scope.dirty === undefined) {
+                return lets;
+            }
+            if (typeof lets === 'object') {
+                const merged = [];
+                const len = Math.max($$scope.dirty.length, lets.length);
+                for (let i = 0; i < len; i += 1) {
+                    merged[i] = $$scope.dirty[i] | lets[i];
+                }
+                return merged;
+            }
+            return $$scope.dirty | lets;
+        }
+        return $$scope.dirty;
+    }
+    function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
+        if (slot_changes) {
+            const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
+            slot.p(slot_context, slot_changes);
+        }
+    }
+    function get_all_dirty_from_scope($$scope) {
+        if ($$scope.ctx.length > 32) {
+            const dirty = [];
+            const length = $$scope.ctx.length / 32;
+            for (let i = 0; i < length; i++) {
+                dirty[i] = -1;
+            }
+            return dirty;
+        }
+        return -1;
+    }
+    function exclude_internal_props(props) {
+        const result = {};
+        for (const k in props)
+            if (k[0] !== '$')
+                result[k] = props[k];
+        return result;
+    }
+    function compute_rest_props(props, keys) {
+        const rest = {};
+        keys = new Set(keys);
+        for (const k in props)
+            if (!keys.has(k) && k[0] !== '$')
+                rest[k] = props[k];
+        return rest;
+    }
     function append(target, node) {
@@ -50,7 +117,15 @@ target.appendChild(node);
     }
+    function set_svg_attributes(node, attributes) {
+        for (const key in attributes) {
+            attr(node, key, attributes[key]);
+        }
+    }
+    function xlink_attr(node, attribute, value) {
+        node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
+    }
     function children(element) {
         return Array.from(element.childNodes);
     }
-    function set_style(node, key, value, important) {
-        node.style.setProperty(key, value, important ? 'important' : '');
+    function toggle_class(element, name, toggle) {
+        element.classList[toggle ? 'add' : 'remove'](name);
     }
@@ -88,13 +163,30 @@
     }
-    let flushing = false;
+    // flush() calls callbacks in this order:
+    // 1. All beforeUpdate callbacks, in order: parents before children
+    // 2. All bind:this callbacks, in reverse order: children before parents.
+    // 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+    //    for afterUpdates called during the initial onMount, which are called in
+    //    reverse order: children before parents.
+    // Since callbacks might update component values, which could trigger another
+    // call to flush(), the following steps guard against this:
+    // 1. During beforeUpdate, any updated components will be added to the
+    //    dirty_components array and will cause a reentrant call to flush(). Because
+    //    the flush index is kept outside the function, the reentrant call will pick
+    //    up where the earlier call left off and go through all dirty components. The
+    //    current_component value is saved and restored so that the reentrant call will
+    //    not interfere with the "parent" flush() call.
+    // 2. bind:this callbacks cannot trigger new flush() calls.
+    // 3. During afterUpdate, any updated components will NOT have their afterUpdate
+    //    callback called a second time; the seen_callbacks set, outside the flush()
+    //    function, guarantees this behavior.
     const seen_callbacks = new Set();
+    let flushidx = 0; // Do *not* move this inside the flush() function
     function flush() {
-        if (flushing)
-            return;
-        flushing = true;
+        const saved_component = current_component;
         do {
             // first, call beforeUpdate functions
             // and update components
-            for (let i = 0; i < dirty_components.length; i += 1) {
-                const component = dirty_components[i];
+            while (flushidx < dirty_components.length) {
+                const component = dirty_components[flushidx];
+                flushidx++;
                 set_current_component(component);
@@ -105,2 +197,3 @@ update(component.$$);
             dirty_components.length = 0;
+            flushidx = 0;
             while (binding_callbacks.length)
@@ -125,4 +218,4 @@ binding_callbacks.pop()();
         update_scheduled = false;
-        flushing = false;
         seen_callbacks.clear();
+        set_current_component(saved_component);
     }
@@ -140,2 +233,3 @@ function update($$) {
     const outroing = new Set();
+    let outros;
     function transition_in(block, local) {
@@ -147,2 +241,52 @@ if (block && block.i) {
     }
+    function transition_out(block, local, detach, callback) {
+        if (block && block.o) {
+            if (outroing.has(block))
+                return;
+            outroing.add(block);
+            outros.c.push(() => {
+                outroing.delete(block);
+                if (callback) {
+                    if (detach)
+                        block.d(1);
+                    callback();
+                }
+            });
+            block.o(local);
+        }
+    }
+
+    function get_spread_update(levels, updates) {
+        const update = {};
+        const to_null_out = {};
+        const accounted_for = { $$scope: 1 };
+        let i = levels.length;
+        while (i--) {
+            const o = levels[i];
+            const n = updates[i];
+            if (n) {
+                for (const key in o) {
+                    if (!(key in n))
+                        to_null_out[key] = 1;
+                }
+                for (const key in n) {
+                    if (!accounted_for[key]) {
+                        update[key] = n[key];
+                        accounted_for[key] = 1;
+                    }
+                }
+                levels[i] = n;
+            }
+            else {
+                for (const key in o) {
+                    accounted_for[key] = 1;
+                }
+            }
+        }
+        for (const key in to_null_out) {
+            if (!(key in update))
+                update[key] = undefined;
+        }
+        return update;
+    }
     function mount_component(component, target, anchor, customElement) {
@@ -274,110 +418,32 @@ const { fragment, on_mount, on_destroy, after_update } = component.$$;
 
-    /* components/icon/src/Icon.svelte generated by Svelte v3.44.0 */
+    /* components/icon/src/Icon.svelte generated by Svelte v3.44.3 */
 
-    function create_if_block_5(ctx) {
+    function fallback_block(ctx) {
     	let svg;
-    	let path;
+    	let use;
+    	let svg_levels = [/*$$restProps*/ ctx[5]];
+    	let svg_data = {};
 
-    	return {
-    		c() {
-    			svg = svg_element("svg");
-    			path = svg_element("path");
-    			attr(path, "d", "M1.119 16.841a1.118 1.118 0 01-1.111-1.127c0-.619.492-1.111\n      1.111-1.111h13.475V1.127A1.133 1.133 0 0115.722 0c.619 0 1.111.508 1.111\n      1.127v13.476h13.475c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127\n      1.127H16.833v13.476c0 .619-.492 1.127-1.111 1.127a1.131 1.131 0\n      01-1.127-1.127V16.841H1.119z");
-    			attr(path, "fill", /*stroke*/ ctx[0]);
-    			attr(svg, "version", "1.1");
-    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-    			attr(svg, "x", "0");
-    			attr(svg, "y", "0");
-    			attr(svg, "width", "100%");
-    			attr(svg, "height", "100%");
-    			attr(svg, "viewBox", "0 0 31.444 31.444");
-    			attr(svg, "xml:space", "preserve");
-    			attr(svg, "class", "svelte-2o8tyv");
-    		},
-    		m(target, anchor) {
-    			insert(target, svg, anchor);
-    			append(svg, path);
-    		},
-    		p(ctx, dirty) {
-    			if (dirty & /*stroke*/ 1) {
-    				attr(path, "fill", /*stroke*/ ctx[0]);
-    			}
-    		},
-    		d(detaching) {
-    			if (detaching) detach(svg);
-    		}
-    	};
-    }
+    	for (let i = 0; i < svg_levels.length; i += 1) {
+    		svg_data = assign(svg_data, svg_levels[i]);
+    	}
 
-    // (82:28) 
-    function create_if_block_4(ctx) {
-    	let svg;
-    	let path;
-
     	return {
     		c() {
     			svg = svg_element("svg");
-    			path = svg_element("path");
-    			attr(path, "d", "M1.111 16.832A1.117 1.117 0 010 15.706c0-.619.492-1.111\n    1.111-1.111H30.3c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127\n    1.127H1.111z");
-    			attr(path, "fill", /*stroke*/ ctx[0]);
-    			attr(svg, "version", "1.1");
-    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-    			attr(svg, "x", "0");
-    			attr(svg, "y", "0");
-    			attr(svg, "width", "100%");
-    			attr(svg, "height", "100%");
-    			attr(svg, "viewBox", "0 0 31.427 31.427");
-    			attr(svg, "xml:space", "preserve");
-    			attr(svg, "class", "svelte-2o8tyv");
+    			use = svg_element("use");
+    			xlink_attr(use, "xlink:href", /*useHref*/ ctx[3]);
+    			set_svg_attributes(svg, svg_data);
     		},
     		m(target, anchor) {
     			insert(target, svg, anchor);
-    			append(svg, path);
+    			append(svg, use);
     		},
     		p(ctx, dirty) {
-    			if (dirty & /*stroke*/ 1) {
-    				attr(path, "fill", /*stroke*/ ctx[0]);
+    			if (dirty & /*useHref*/ 8) {
+    				xlink_attr(use, "xlink:href", /*useHref*/ ctx[3]);
     			}
-    		},
-    		d(detaching) {
-    			if (detaching) detach(svg);
-    		}
-    	};
-    }
 
-    // (61:35) 
-    function create_if_block_3(ctx) {
-    	let svg;
-    	let g;
-    	let path;
-
-    	return {
-    		c() {
-    			svg = svg_element("svg");
-    			g = svg_element("g");
-    			path = svg_element("path");
-    			attr(path, "d", "M617.858,370.896L221.513,9.705c-13.006-12.94-34.099-12.94-47.105,0c-13.006,12.939-13.006,33.934,0,46.874\n         l372.447,339.438L174.441,735.454c-13.006,12.94-13.006,33.935,0,46.874s34.099,12.939,47.104,0l396.346-361.191\n         c6.932-6.898,9.904-16.043,9.441-25.087C627.763,386.972,624.792,377.828,617.858,370.896z");
-    			attr(svg, "version", "1.1");
-    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-    			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-    			attr(svg, "x", "0px");
-    			attr(svg, "y", "0px");
-    			attr(svg, "stroke", /*stroke*/ ctx[0]);
-    			attr(svg, "width", "100%");
-    			attr(svg, "height", "100%");
-    			attr(svg, "viewBox", "0 0 792.033 792.033");
-    			set_style(svg, "enable-background", "new 0 0 792.033 792.033");
-    			attr(svg, "xml:space", "preserve");
-    			attr(svg, "class", "svelte-2o8tyv");
+    			set_svg_attributes(svg, svg_data = get_spread_update(svg_levels, [dirty & /*$$restProps*/ 32 && /*$$restProps*/ ctx[5]]));
     		},
-    		m(target, anchor) {
-    			insert(target, svg, anchor);
-    			append(svg, g);
-    			append(g, path);
-    		},
-    		p(ctx, dirty) {
-    			if (dirty & /*stroke*/ 1) {
-    				attr(svg, "stroke", /*stroke*/ ctx[0]);
-    			}
-    		},
     		d(detaching) {
@@ -389,206 +455,31 @@ if (detaching) detach(svg);
 
-    // (45:28) 
-    function create_if_block_2(ctx) {
-    	let svg;
-    	let g;
-    	let circle0;
-    	let circle1;
-    	let circle2;
+    function create_fragment(ctx) {
+    	let i;
+    	let i_class_value;
+    	let current;
+    	let mounted;
+    	let dispose;
+    	const default_slot_template = /*#slots*/ ctx[7].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
+    	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
     	return {
     		c() {
-    			svg = svg_element("svg");
-    			g = svg_element("g");
-    			circle0 = svg_element("circle");
-    			circle1 = svg_element("circle");
-    			circle2 = svg_element("circle");
-    			attr(circle0, "cx", "42.667");
-    			attr(circle0, "cy", "213.333");
-    			attr(circle0, "r", "42.667");
-    			attr(circle1, "cx", "213.333");
-    			attr(circle1, "cy", "213.333");
-    			attr(circle1, "r", "42.667");
-    			attr(circle2, "cx", "384");
-    			attr(circle2, "cy", "213.333");
-    			attr(circle2, "r", "42.667");
-    			attr(svg, "version", "1.1");
-    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-    			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-    			attr(svg, "width", "100%");
-    			attr(svg, "height", "100%");
-    			attr(svg, "viewBox", "0 0 426.667 426.667");
-    			set_style(svg, "enable-background", "new 0 0 426.667 426.667");
-    			attr(svg, "xml:space", "preserve");
-    			attr(svg, "class", "svelte-2o8tyv");
+    			i = element("i");
+    			if (default_slot_or_fallback) default_slot_or_fallback.c();
+    			attr(i, "class", i_class_value = "resp-icon resp-icon--" + /*sizeOf*/ ctx[2] + " " + /*className*/ ctx[0]);
+    			attr(i, "style", /*style*/ ctx[4]);
+    			toggle_class(i, "resp-icon--clickable", /*clickable*/ ctx[1]);
     		},
     		m(target, anchor) {
-    			insert(target, svg, anchor);
-    			append(svg, g);
-    			append(g, circle0);
-    			append(g, circle1);
-    			append(g, circle2);
-    		},
-    		p: noop,
-    		d(detaching) {
-    			if (detaching) detach(svg);
-    		}
-    	};
-    }
+    			insert(target, i, anchor);
 
-    // (26:30) 
-    function create_if_block_1(ctx) {
-    	let svg;
-    	let line0;
-    	let line1;
-    	let line2;
-    	let line3;
-    	let line4;
-    	let line5;
-    	let line6;
-    	let line7;
-    	let line8;
-
-    	return {
-    		c() {
-    			svg = svg_element("svg");
-    			line0 = svg_element("line");
-    			line1 = svg_element("line");
-    			line2 = svg_element("line");
-    			line3 = svg_element("line");
-    			line4 = svg_element("line");
-    			line5 = svg_element("line");
-    			line6 = svg_element("line");
-    			line7 = svg_element("line");
-    			line8 = svg_element("line");
-    			attr(line0, "x1", "4");
-    			attr(line0, "y1", "21");
-    			attr(line0, "x2", "4");
-    			attr(line0, "y2", "14");
-    			attr(line1, "x1", "4");
-    			attr(line1, "y1", "10");
-    			attr(line1, "x2", "4");
-    			attr(line1, "y2", "3");
-    			attr(line2, "x1", "12");
-    			attr(line2, "y1", "21");
-    			attr(line2, "x2", "12");
-    			attr(line2, "y2", "12");
-    			attr(line3, "x1", "12");
-    			attr(line3, "y1", "8");
-    			attr(line3, "x2", "12");
-    			attr(line3, "y2", "3");
-    			attr(line4, "x1", "20");
-    			attr(line4, "y1", "21");
-    			attr(line4, "x2", "20");
-    			attr(line4, "y2", "16");
-    			attr(line5, "x1", "20");
-    			attr(line5, "y1", "12");
-    			attr(line5, "x2", "20");
-    			attr(line5, "y2", "3");
-    			attr(line6, "x1", "1");
-    			attr(line6, "y1", "14");
-    			attr(line6, "x2", "7");
-    			attr(line6, "y2", "14");
-    			attr(line7, "x1", "9");
-    			attr(line7, "y1", "8");
-    			attr(line7, "x2", "15");
-    			attr(line7, "y2", "8");
-    			attr(line8, "x1", "17");
-    			attr(line8, "y1", "16");
-    			attr(line8, "x2", "23");
-    			attr(line8, "y2", "16");
-    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-    			attr(svg, "viewBox", "0 0 24 24");
-    			attr(svg, "fill", "none");
-    			attr(svg, "stroke", /*stroke*/ ctx[0]);
-    			attr(svg, "stroke-width", "2");
-    			attr(svg, "stroke-linecap", "round");
-    			attr(svg, "stroke-linejoin", "round");
-    			attr(svg, "class", "svelte-2o8tyv");
-    		},
-    		m(target, anchor) {
-    			insert(target, svg, anchor);
-    			append(svg, line0);
-    			append(svg, line1);
-    			append(svg, line2);
-    			append(svg, line3);
-    			append(svg, line4);
-    			append(svg, line5);
-    			append(svg, line6);
-    			append(svg, line7);
-    			append(svg, line8);
-    		},
-    		p(ctx, dirty) {
-    			if (dirty & /*stroke*/ 1) {
-    				attr(svg, "stroke", /*stroke*/ ctx[0]);
+    			if (default_slot_or_fallback) {
+    				default_slot_or_fallback.m(i, null);
     			}
-    		},
-    		d(detaching) {
-    			if (detaching) detach(svg);
-    		}
-    	};
-    }
 
-    // (7:2) {#if type === "x"}
-    function create_if_block(ctx) {
-    	let svg;
-    	let g;
-    	let path;
+    			current = true;
 
-    	return {
-    		c() {
-    			svg = svg_element("svg");
-    			g = svg_element("g");
-    			path = svg_element("path");
-    			attr(path, "d", "M228.929,205.01L404.596,29.343c6.78-6.548,6.968-17.352,0.42-24.132c-6.548-6.78-17.352-6.968-24.132-0.42\n     c-0.142,0.137-0.282,0.277-0.42,0.42L204.796,180.878L29.129,5.21c-6.78-6.548-17.584-6.36-24.132,0.42\n     c-6.388,6.614-6.388,17.099,0,23.713L180.664,205.01L4.997,380.677c-6.663,6.664-6.663,17.468,0,24.132\n     c6.664,6.662,17.468,6.662,24.132,0l175.667-175.667l175.667,175.667c6.78,6.548,17.584,6.36,24.132-0.42\n     c6.387-6.614,6.387-17.099,0-23.712L228.929,205.01z");
-    			attr(svg, "xmlns", "http://www.w3.org/2000/svg");
-    			attr(svg, "xmlns:xlink", "http://www.w3.org/1999/xlink");
-    			attr(svg, "x", "0px");
-    			attr(svg, "y", "0px");
-    			attr(svg, "viewBox", "0 0 408 408");
-    			set_style(svg, "enable-background", "new 0 0 408 408");
-    			attr(svg, "xml:space", "preserve");
-    			attr(svg, "class", "svelte-2o8tyv");
-    		},
-    		m(target, anchor) {
-    			insert(target, svg, anchor);
-    			append(svg, g);
-    			append(g, path);
-    		},
-    		p: noop,
-    		d(detaching) {
-    			if (detaching) detach(svg);
-    		}
-    	};
-    }
-
-    function create_fragment(ctx) {
-    	let span;
-    	let mounted;
-    	let dispose;
-
-    	function select_block_type(ctx, dirty) {
-    		if (/*type*/ ctx[1] === "x") return create_if_block;
-    		if (/*type*/ ctx[1] === "filter") return create_if_block_1;
-    		if (/*type*/ ctx[1] === "more") return create_if_block_2;
-    		if (/*type*/ ctx[1] === "right-arrow") return create_if_block_3;
-    		if (/*type*/ ctx[1] == "minus") return create_if_block_4;
-    		if (/*type*/ ctx[1] == "plus") return create_if_block_5;
-    	}
-
-    	let current_block_type = select_block_type(ctx);
-    	let if_block = current_block_type && current_block_type(ctx);
-
-    	return {
-    		c() {
-    			span = element("span");
-    			if (if_block) if_block.c();
-    			attr(span, "class", "responsive-ui-icon svelte-2o8tyv");
-    			attr(span, "style", /*style*/ ctx[2]);
-    		},
-    		m(target, anchor) {
-    			insert(target, span, anchor);
-    			if (if_block) if_block.m(span, null);
-
     			if (!mounted) {
-    				dispose = listen(span, "click", /*click_handler*/ ctx[3]);
+    				dispose = listen(i, "click", /*click_handler*/ ctx[8]);
     				mounted = true;
@@ -598,27 +489,45 @@ }
     		p(ctx, [dirty]) {
-    			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
-    				if_block.p(ctx, dirty);
+    			if (default_slot) {
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
+    					update_slot_base(
+    						default_slot,
+    						default_slot_template,
+    						ctx,
+    						/*$$scope*/ ctx[6],
+    						!current
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[6])
+    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[6], dirty, null),
+    						null
+    					);
+    				}
     			} else {
-    				if (if_block) if_block.d(1);
-    				if_block = current_block_type && current_block_type(ctx);
-
-    				if (if_block) {
-    					if_block.c();
-    					if_block.m(span, null);
+    				if (default_slot_or_fallback && default_slot_or_fallback.p && (!current || dirty & /*$$restProps, useHref*/ 40)) {
+    					default_slot_or_fallback.p(ctx, !current ? -1 : dirty);
     				}
     			}
 
-    			if (dirty & /*style*/ 4) {
-    				attr(span, "style", /*style*/ ctx[2]);
+    			if (!current || dirty & /*sizeOf, className*/ 5 && i_class_value !== (i_class_value = "resp-icon resp-icon--" + /*sizeOf*/ ctx[2] + " " + /*className*/ ctx[0])) {
+    				attr(i, "class", i_class_value);
     			}
-    		},
-    		i: noop,
-    		o: noop,
-    		d(detaching) {
-    			if (detaching) detach(span);
 
-    			if (if_block) {
-    				if_block.d();
+    			if (!current || dirty & /*style*/ 16) {
+    				attr(i, "style", /*style*/ ctx[4]);
     			}
 
+    			if (dirty & /*sizeOf, className, clickable*/ 7) {
+    				toggle_class(i, "resp-icon--clickable", /*clickable*/ ctx[1]);
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			transition_in(default_slot_or_fallback, local);
+    			current = true;
+    		},
+    		o(local) {
+    			transition_out(default_slot_or_fallback, local);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) detach(i);
+    			if (default_slot_or_fallback) default_slot_or_fallback.d(detaching);
     			mounted = false;
@@ -631,4 +540,9 @@ dispose();
     function instance($$self, $$props, $$invalidate) {
-    	let { stroke = "#000" } = $$props;
-    	let { type = "" } = $$props;
+    	const omit_props_names = ["class","clickable","sizeOf","useHref","style"];
+    	let $$restProps = compute_rest_props($$props, omit_props_names);
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	let { class: className = "" } = $$props;
+    	let { clickable = false } = $$props;
+    	let { sizeOf = "sm" } = $$props;
+    	let { useHref = "" } = $$props;
     	let { style = "" } = $$props;
@@ -640,9 +554,24 @@
 
-    	$$self.$$set = $$props => {
-    		if ('stroke' in $$props) $$invalidate(0, stroke = $$props.stroke);
-    		if ('type' in $$props) $$invalidate(1, type = $$props.type);
-    		if ('style' in $$props) $$invalidate(2, style = $$props.style);
+    	$$self.$$set = $$new_props => {
+    		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+    		$$invalidate(5, $$restProps = compute_rest_props($$props, omit_props_names));
+    		if ('class' in $$new_props) $$invalidate(0, className = $$new_props.class);
+    		if ('clickable' in $$new_props) $$invalidate(1, clickable = $$new_props.clickable);
+    		if ('sizeOf' in $$new_props) $$invalidate(2, sizeOf = $$new_props.sizeOf);
+    		if ('useHref' in $$new_props) $$invalidate(3, useHref = $$new_props.useHref);
+    		if ('style' in $$new_props) $$invalidate(4, style = $$new_props.style);
+    		if ('$$scope' in $$new_props) $$invalidate(6, $$scope = $$new_props.$$scope);
     	};
 
-    	return [stroke, type, style, click_handler];
+    	return [
+    		className,
+    		clickable,
+    		sizeOf,
+    		useHref,
+    		style,
+    		$$restProps,
+    		$$scope,
+    		slots,
+    		click_handler
+    	];
     }
@@ -653,3 +582,10 @@
     		super();
-    		init(this, options, instance, create_fragment, safe_not_equal, { stroke: 0, type: 1, style: 2 });
+
+    		init(this, options, instance, create_fragment, safe_not_equal, {
+    			class: 0,
+    			clickable: 1,
+    			sizeOf: 2,
+    			useHref: 3,
+    			style: 4
+    		});
     	}
@@ -656,0 +592,0 @@ }

package.json

 {
   "name": "@responsive-ui/icon",
-  "version": "1.0.7-alpha.0",
+  "version": "1.0.9-alpha.1",
   "description": "A icon component of responsive-ui.",
@@ -8,2 +8,3 @@ "author": "Si3nLoong <[e-mail]> (https://github.com/si3nloong)",
   "license": "MIT",
+  "type": "module",
   "main": "lib/cjs/index.js",
@@ -41,3 +42,4 @@ "browser": "lib/index.js",
     "type": "git",
-    "url": "git+https://github.com/wetix/responsive-ui.git"
+    "url": "https://github.com/wetix/responsive-ui",
+    "directory": "components/icon"
   },
@@ -50,3 +52,3 @@ "scripts": {
   },
-  "gitHead": "3fde8242766d6298122a874e2415ced21cd78f27"
+  "gitHead": "50c6059183e704685646087a37edcd430b875948"
 }

README.md

@@ -34,3 +34,3 @@
 
-[@responsive-ui/accordion](https://github.com/wetix/responsive-ui/tree/main/components/accordion) is 100% free and open-source, under the [MIT license](https://github.com/wetix/responsive-ui/blob/main/LICENSE).
+[@responsive-ui/icon](https://github.com/wetix/responsive-ui/tree/main/components/icon) is 100% free and open-source, under the [MIT license](https://github.com/wetix/responsive-ui/blob/main/LICENSE).
 
@@ -37,0 +37,0 @@ ## 🎉 Big Thanks To

types/index.d.ts

 import type { SvelteComponentTyped } from "svelte/internal";
 
 export interface IconProps {
-  type: string;
+  id?: string;
+  class?: string;
+  sizeOf?: "sm" | "md" | "lg";
+  fill?: string;
   stroke?: string;
+  viewBox?: string;
+  useHref?: string;
   style?: string;
@@ -10,7 +15,15 @@ }
 export interface IconEvents {
-  click?: any;
+  click?: WindowEventMap["click"];
 }
 
-declare class Icon extends SvelteComponentTyped<IconProps, IconEvents> {}
+export interface IconSlots {
+  default: {};
+}
 
+declare class Icon extends SvelteComponentTyped<
+  IconProps,
+  IconEvents,
+  IconSlots
+> {}
+
 export default Icon;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Is type module

Yes

Worsened metrics

Total package byte prevSize

60730

decreased by-22.33%

Number of package files

9

decreased by-10%

Lines of code

1689

decreased by-11.25%

No dependency changes