diff --git a/app/javascript/components/AppIcon.vue b/app/javascript/components/AppIcon.vue
index f28bd50..003784b 100644
--- a/app/javascript/components/AppIcon.vue
+++ b/app/javascript/components/AppIcon.vue
@@ -1,190 +1,49 @@
-
-
+
+
\ No newline at end of file
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 2e64fa3..895c4ef 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -1,10 +1,12 @@
import '../styles';
+import "vue-resize/dist/vue-resize";
import Vue from 'vue'
import { sync } from 'vuex-router-sync';
import { swInit } from "../lib/ServiceWorker";
import responsiveSync from "../lib/VuexResponsiveSync";
import VueProgressBar from "vue-progressbar";
+import VueResize from "vue-resize";
import config from '../config';
import store from '../store';
import router from '../router';
@@ -18,6 +20,7 @@ import AppDatePicker from "../components/AppDatePicker";
import AppDropdown from "../components/AppDropdown";
import AppExpandTransition from "../components/AppExpandTransition";
import AppIcon from "../components/AppIcon";
+import AppIconicIcon from "../components/AppIconicIcon";
import AppModal from "../components/AppModal";
import AppNavbar from "../components/AppNavbar";
import AppPager from "../components/AppPager";
@@ -33,6 +36,7 @@ Vue.component("AppDatePicker", AppDatePicker);
Vue.component("AppDropdown", AppDropdown);
Vue.component("AppExpandTransition", AppExpandTransition);
Vue.component("AppIcon", AppIcon);
+Vue.component("AppIconicIcon", AppIconicIcon);
Vue.component("AppModal", AppModal);
Vue.component("AppNavbar", AppNavbar);
Vue.component("AppPager", AppPager);
@@ -56,6 +60,8 @@ Vue.use(VueProgressBar, {
// inverse: false
});
+Vue.use(VueResize);
+
sync(store, router);
swInit(store);
responsiveSync(store);
diff --git a/app/javascript/styles/_iconic.scss b/app/javascript/styles/_iconic.scss
index 984e94c..5d489ef 100644
--- a/app/javascript/styles/_iconic.scss
+++ b/app/javascript/styles/_iconic.scss
@@ -1,3 +1,17 @@
+/* Iconic Responsive Support Styles */
+.iconic-property-fill, .iconic-property-text {stroke: none !important;}
+.iconic-property-stroke {fill: none !important;}
+svg.iconic.iconic-fluid {height:100% !important;width:100% !important;}
+svg.iconic.iconic-sm:not(.iconic-size-md):not(.iconic-size-lg), svg.iconic.iconic-size-sm{width:16px;height:16px;}
+svg.iconic.iconic-md:not(.iconic-size-sm):not(.iconic-size-lg), svg.iconic.iconic-size-md{width:32px;height:32px;}
+svg.iconic.iconic-lg:not(.iconic-size-sm):not(.iconic-size-md), svg.iconic.iconic-size-lg{width:128px;height:128px;}
+svg.iconic-sm > g.iconic-md, svg.iconic-sm > g.iconic-lg, svg.iconic-md > g.iconic-sm, svg.iconic-md > g.iconic-lg, svg.iconic-lg > g.iconic-sm, svg.iconic-lg > g.iconic-md {display: none;}
+svg.iconic.iconic-icon-sm > g.iconic-lg, svg.iconic.iconic-icon-md > g.iconic-lg {display:none;}
+svg.iconic-sm:not(.iconic-icon-md):not(.iconic-icon-lg) > g.iconic-sm, svg.iconic-md.iconic-icon-sm > g.iconic-sm, svg.iconic-lg.iconic-icon-sm > g.iconic-sm {display:inline;}
+svg.iconic-md:not(.iconic-icon-sm):not(.iconic-icon-lg) > g.iconic-md, svg.iconic-sm.iconic-icon-md > g.iconic-md, svg.iconic-lg.iconic-icon-md > g.iconic-md {display:inline;}
+svg.iconic-lg:not(.iconic-icon-sm):not(.iconic-icon-md) > g.iconic-lg, svg.iconic-sm.iconic-icon-lg > g.iconic-lg, svg.iconic-md.iconic-icon-lg > g.iconic-lg {display:inline;}
+
+
@mixin iconic-color($color) {
fill: $color;
stroke: $color;
diff --git a/config/webpack/loaders/iconic_svg_loader.js b/config/webpack/loaders/iconic_svg_loader.js
new file mode 100644
index 0000000..ece1ca5
--- /dev/null
+++ b/config/webpack/loaders/iconic_svg_loader.js
@@ -0,0 +1,81 @@
+const cheerio = require('cheerio');
+
+const iriElementsAndProperties = {
+ 'clipPath': ['clip-path'],
+ 'color-profile': ['color-profile'],
+ 'cursor': ['cursor'],
+ 'filter': ['filter'],
+ 'linearGradient': ['fill', 'stroke'],
+ 'marker': ['marker', 'marker-start', 'marker-mid', 'marker-end'],
+ 'mask': ['mask'],
+ 'pattern': ['fill', 'stroke'],
+ 'radialGradient': ['fill', 'stroke']
+};
+
+module.exports = function(content) {
+ this.cacheable && this.cacheable();
+
+ const $ = cheerio.load(content, {
+ lowerCaseTags: false
+ });
+
+ let idReplacements = [];
+
+ for(let element in iriElementsAndProperties) {
+ let properties = iriElementsAndProperties[element];
+
+ $(`svg defs ${element}[id]`).each(function() {
+ const $elem = $(this);
+ const id = $elem.attr("id");
+ const newId = `__ICONIC_SVG_REPLACEMENT_${idReplacements.length}`;
+ idReplacements.push(newId);
+
+ $elem.attr("id", newId);
+
+ for (let property of properties) {
+ $(`svg *[${property}="url(#${id})"]`).each(function() {
+ const $elem = $(this);
+ $elem.attr(property, `url(#${newId})`);
+ })
+ }
+ })
+ }
+
+ const $svg = $("svg");
+ let iconName = $svg.attr("data-icon");
+
+ if (!iconName) {
+ const match = $svg.attr("class").match(/iconic-([a-z\-]+)/);
+ if (match) {
+ $svg.attr("data-icon", match[1]);
+ } else {
+ throw "Can't parse class into data-icon";
+ }
+ }
+
+ const scriptBlocks = [];
+
+ // Find then prune the scripts
+ $("svg script").each(function() {
+ const $script = $(this);
+ const scriptType = $script.attr("type");
+ if (!scriptType || scriptType === 'application/ecmascript' || scriptType === 'application/javascript') {
+ scriptBlocks.push($script.html());
+ }
+ });
+
+ $("svg script").remove();
+
+
+ const attributes = $svg.get(0).attribs;
+ const svgMarkup = $("svg").html();
+
+
+ return `module.exports = ${JSON.stringify({
+ attributes: attributes,
+ content: svgMarkup,
+ idReplacements: idReplacements,
+ scriptBlocks: scriptBlocks
+ })}`;
+
+};
\ No newline at end of file
diff --git a/config/webpack/loaders/svg.js b/config/webpack/loaders/svg.js
index b1da427..cdaf644 100644
--- a/config/webpack/loaders/svg.js
+++ b/config/webpack/loaders/svg.js
@@ -1,9 +1,9 @@
const path = require("path");
module.exports = {
- test: /\.svg$/,
+ test: /\/iconic\/svg\/.*\.svg$/,
use: [{
- loader: path.join(__dirname, 'svg_loader.js')
+ loader: path.join(__dirname, 'iconic_svg_loader.js')
}]
};
diff --git a/config/webpack/loaders/svg_loader.js b/config/webpack/loaders/svg_loader.js
deleted file mode 100644
index 619b321..0000000
--- a/config/webpack/loaders/svg_loader.js
+++ /dev/null
@@ -1,27 +0,0 @@
-module.exports = function(content) {
- this.cacheable && this.cacheable();
-
- var match = content.match(/