VUE-223 KvIcon: dynamically inline most icons, sprite common icons

.storybook/stories/GenericPromoBanner.stories.js

@@ -1,52 +1,8 @@
 import Vue from 'vue'
 import StoryRouter from 'storybook-vue-router';
-import { select, text } from '@storybook/addon-knobs';
+import { text } from '@storybook/addon-knobs';
 import GenericPromoBanner from '@/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner';
 
-const iconKeySelect = {
-	browse: "browse-toggle",
-	corporate: "corporate-engagement",
-	curved: "curved-arrow",
-	dedicate: "dedicate-heart",
-	distribution: "distribution",
-	edit: "edit",
-	email: "email",
-	filter: "filter",
-	filters: "filters-toggle",
-	filters: "filters",
-	globe: "globe",
-	grants: "grants",
-	grid: "grid",
-	half: "half-star",
-	handshake: "handshake",
-	iwd: "iwd-flower",
-	kiva: "kiva-card",
-	kivapromise: "kiva-promise",
-	leaf: "leaf",
-	leaves: "leaves",
-	line: "line-graph",
-	list: "list",
-	lock: "lock",
-	magnify: "magnify-glass",
-	map: "map",
-	match: "match",
-	nearme: "nearme",
-	paypal: "paypal",
-	pdf: "pdf",
-	pencil: "pencil",
-	present: "present",
-	refresh: "refresh",
-	secure: "secure-lock",
-	slideshow: "slideshow-dot",
-	small: "small-x",
-	sort: "sort",
-	star: "star",
-	tags: "tags-checkmark",
-	triangle: "triangle",
-	woman: "woman",
-	x: "x",
-};
-
 // import plugins
 import kivaPlugins from '@/plugins';
 Vue.use(kivaPlugins)
@@ -70,7 +26,7 @@ export const Default = () => ({
 	props: {
 		iconKey: {
 			type: String,
-			default: select('Icon Key', iconKeySelect, 'present')
+			default: 'present'
 		},
 		promoBannerContent: {
 			type: Object,
@@ -82,7 +38,6 @@ export const Default = () => ({
 				};
 			}
 		},
-
 	},
 	template: `
 		<div>
@@ -95,3 +50,50 @@ export const Default = () => ({
 		</div>
 	`,
 });
+
+
+export const AllIcons = () => ({
+	components: {
+		GenericPromoBanner,
+	},
+	props: {
+		iconKey: {
+			type: String,
+			default: 'present'
+		},
+		promoBannerContent: {
+			type: Object,
+			default() {
+				return {
+					kvTrackEvent: [],
+					link: `${text('Link', 'http://kiva.org')}`,
+					richText: decodeHTML(`${text('Banner Text', 'Amazing! Thanks to you, we funded <u>ALL U.S. loans</u> today! Click here to support others who need your help.')}`),
+				};
+			}
+		},
+	},
+	data() {
+		return {
+			icons: [
+				"present",
+				"kiva-card",
+				"monthly-good",
+				"iwd-flower",
+				"confirmation",
+				"info",
+				"question",
+			]
+		}
+	},
+	template: `
+		<div>
+			<generic-promo-banner
+				v-for="icon in icons"
+				:icon-key="icon"
+				:promo-banner-content="promoBannerContent"
+			/>
+			<br/>
+			<p class="subheader">Banner text supports basic html tags</p>
+		</div>
+	`,
+});

.storybook/stories/KvIcon.stories.js

@@ -0,0 +1,94 @@
+import KvIcon from '@/components/Kv/KvIcon';
+
+function getFilenames(r) {
+	return r.keys().map((filename) => {
+		let str = filename;
+		str = str.substring(2); // remove ./
+		str = str.substring(0, str.length - 4); // remove .svg
+		return str;
+	});
+}
+
+export default {
+	title: 'Kv/KvIcon',
+	component: KvIcon,
+ };
+
+export const Default = () => ({
+	components: {
+		KvIcon
+	},
+	template: `
+	<div>
+		<kv-icon name="print" style="width: 10rem; fill: orange;" />
+	</div>
+	`,
+});
+
+export const inlined = () => ({
+	components: {
+		KvIcon
+	},
+	data() {
+		return {
+			iconNames: getFilenames(require.context('@/assets/icons/inline/', true, /\.svg$/))
+		}
+	},
+	template: `
+		<ul style="
+			list-style: none;
+			display: grid;
+			grid-gap: 3rem;
+			grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+		">
+			<li
+				v-for="iconName in iconNames"
+				:key="iconName"
+				style="
+					display: grid;
+					grid-template-rows: 7rem auto;
+					align-items: center;
+					text-align: center;
+					font-size: 0.75rem;
+				"
+			 >
+			 	<kv-icon :name="iconName" />
+			 	<div>{{ iconName }}</div>
+			</li>
+		</ul>
+	`,
+});
+
+export const fromSprite = () => ({
+	components: {
+		KvIcon
+	},
+	data() {
+		return {
+			iconNames: getFilenames(require.context('@/assets/icons/sprite/', true, /\.svg$/))
+		}
+	},
+	template: `
+		<ul style="
+			list-style: none;
+			display: grid;
+			grid-gap: 3rem;
+			grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+		">
+			<li
+				v-for="iconName in iconNames"
+				:key="iconName"
+				style="
+					display: grid;
+					grid-template-rows: 7rem auto;
+					align-items: center;
+					text-align: center;
+					font-size: 0.75rem;
+				"
+			>
+			 	<kv-icon :name="iconName" :from-sprite="true" />
+			 	<div>{{ iconName }}</div>
+			</li>
+		</ul>
+	`,
+});

.storybook/stories/KvTooltip.stories.js

@@ -1,5 +1,5 @@
 import KvTooltip from '@/components/Kv/KvTooltip';
-import IconQuestionMark from '@/assets/inline-svgs/icons/question-mark.svg';
+import KvIcon from '@/components/Kv/KvIcon';
 
 export default {
 	title: 'Kv/KvTooltip',
@@ -29,11 +29,12 @@ export const Default = () => ({
 export const QuestionMarkIcon = () => ({
 	components: {
 		KvTooltip,
-		IconQuestionMark,
+		KvIcon,
 	},
 	template: `
 		<div>
-			<icon-question-mark
+			<kv-icon
+				name="question"
 				id="question"
 				style="fill: #d8d8d8; width: 1rem;"
 			/>

build/webpack.base.conf.js

@@ -88,7 +88,7 @@ module.exports = {
 			},
 			{
 				test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
-				exclude: [resolve('src/assets/icons'), resolve('src/assets/inline-svgs/')],
+				exclude: [resolve('src/assets/icons/inline/'), resolve('src/assets/inline-svgs/')],
 				loader: 'url-loader',
 				options: {
 					limit: 1, // 10000 is default but we'd need to exclude apple-touch-icons,
@@ -98,7 +98,7 @@ module.exports = {
 			},
 			{
 				test: /\.svg$/,
-				include: [resolve('src/assets/inline-svgs/')],
+				include: [resolve('src/assets/icons/inline/'), resolve('src/assets/inline-svgs/')],
 				use: [
 					'babel-loader',
 					{