')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '')))));\n },\n renderIconBordered: function renderIconBordered(cssPrefix) {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'example m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'text-lg' }, 'Bordered & Pulled Icons'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'Use ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-border'), ' and ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, 'pull-right'), ' or ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, 'pull-left'), 'for easy pull quotes or article icons.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0', role: 'alert' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'This example contains icons which may not be in your kit')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'bg-body br-t p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h4', { className: 'text-sm text-upper text-muted' }, 'Example'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-quote-left ficon-3x pull-left ficon-border' }), ' Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that\\u2019s no matter\\u2014tomorrow we will run faster, stretch out our arms farther\\u2026 And then one fine morning\\u2014 So we beat on, boats against the current, borne back ceaselessly into the past.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'html' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), 'Gatsby believed in the green light...')));\n },\n renderIconAnimated: function renderIconAnimated(cssPrefix) {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'example m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'text-lg' }, 'Animated Icons'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'Use the ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-spin'), ' class to get any icon to rotate. Works well with ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-spinner'), ', ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-refresh'), ', and ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-cog'), '.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0', role: 'alert' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'This example contains icons which may not be in your kit')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'bg-body br-t p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h4', { className: 'text-sm text-upper text-muted' }, 'Example'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('button', { className: 'btn btn-secondary btn-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-spinner ficon-spin' })), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('button', { className: 'btn btn-secondary btn-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-sync ficon-spin' })), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('button', { className: 'btn btn-secondary btn-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-gear ficon-spin' }))), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'html' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '')))), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'alert alert-warning bg-body has-icon' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-warning ficon-lg alert-icon' }), ' Just a heads up. CSS3 animations aren\\'t supported in IE8 - IE9.'));\n },\n renderIconRotated: function renderIconRotated(cssPrefix) {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'example m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'text-lg' }, 'Rotated & Flipped'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'To arbitrarily rotate and flip icons, use the ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-rotate-*'), 'and ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-flip-*'), ' classes.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0', role: 'alert' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'This example contains icons which may not be in your kit')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'bg-body br-t p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h4', { className: 'text-sm text-upper text-muted' }, 'Example'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-flag' }), '\\xA0 normal', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-flag ficon-rotate-90' }), '\\xA0fa-rotate-90', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-flag ficon-rotate-180' }), '\\xA0fa-rotate-180', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-flag ficon-rotate-270' }), '\\xA0fa-rotate-270', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-flag ficon-flip-horizontal' }), '\\xA0fa-flip-horizontal', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-flag ficon-flip-vertical' }), '\\xA0fa-flip-vertical')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'html' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' normal'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-rotate-90'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-rotate-180'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-rotate-270'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-flip-horizontal'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-flip-vertical'))));\n },\n renderIconStacked: function renderIconStacked(cssPrefix) {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'example m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'text-lg' }, 'Stacked Icons'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'To stack multiple icons, use the ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-stack'), ' class on the parent, the ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-stack-1x'), ' for the regularly sized icon, and ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-stack-2x'), 'for the larger icon. ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, cssPrefix, '-inverse'), ' can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0', role: 'alert' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'This example contains icons which may not be in your kit')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'bg-body br-t p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h4', { className: 'text-sm text-upper text-muted' }, 'Example'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'ficon-stack ficon-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-square-o ficon-stack-2x' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-twitter ficon-stack-1x' })), cssPrefix, '-twitter on ', cssPrefix, '-square-o', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'ficon-stack ficon-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-circle ficon-stack-2x' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-flag ficon-stack-1x ficon-inverse' })), cssPrefix, '-flag on ', cssPrefix, '-circle', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'ficon-stack ficon-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-square ficon-stack-2x' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-code ficon-stack-1x ficon-inverse' })), cssPrefix, '-code on ', cssPrefix, '-square', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'ficon-stack ficon-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-camera ficon-stack-1x' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-ban ficon-stack-2x text-danger' })), cssPrefix, '-ban on ', cssPrefix, '-camera'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'html' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'p-xs-b-md-sm' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '\\xA0\\xA0\\xA0'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '\\xA0\\xA0\\xA0'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-twitter on ', cssPrefix, '-square-o', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' })), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'p-xs-b-md-sm' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '\\xA0\\xA0\\xA0'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '\\xA0\\xA0\\xA0'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-flag on ', cssPrefix, '-circle', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ' ')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'p-xs-b-md-sm' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '\\xA0\\xA0\\xA0'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '\\xA0\\xA0\\xA0'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-code on ', cssPrefix, '-square', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ' ')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'p-xs-b-md-sm' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '\\xA0\\xA0\\xA0'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, '\\xA0\\xA0\\xA0'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''), ' ', cssPrefix, '-ban on ', cssPrefix, '-camera'))));\n },\n renderIconManual: function renderIconManual() {\n var _resources2 = this.resources(),\n kit = _resources2.kit;\n\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'example m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'text-lg' }, 'Using CSS Only'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'You can render icons purely using CSS (rather than through dedicated HTML elements).'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'css' }, '.icon-selector ', '{', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0font-family: \\'', kit.subsetName, '\\';', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0display: inline-block;', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0font-size: inherit;', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0font-weight: normal;', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0font-style: normal;', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0line-height: 1;', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0text-rendering: auto;', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '}', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '.icon-selector:before ', '{', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0content: \\'\\\\f001\\'; /* your icon\\'s unicode here */', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '}')));\n },\n renderUsingIconsOnWeb: function renderUsingIconsOnWeb() {\n var _resources3 = this.resources(),\n iconSettings = _resources3.iconSettings;\n\n var cssPrefix = iconSettings.cssPrefix;\n\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('section', { className: 'kit-components-icons-use m-xs-b-xl', id: 'kit-components-icons-use-web' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h2', { className: 'text-2x m-xs-b-0' }, 'Using your icons on the web'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('hr', { className: 'hr-lg m-xs-y-sm' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'example m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'You can place your Fort Awesome icons just about anywhere using your CSS kit prefix', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, iconSettings.cssPrefix), ' and the icon\\'s name. Fort Awesome icons are designed to be used with inline elements (we like the ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, ''), ' tag, but you can use ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, ''), ' too).'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'bg-body br-t p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h4', { className: 'text-sm text-upper text-muted' }, 'Example'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'icon-2339 fa fa-search' })), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'html' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('span', { className: 'nt' }, ''))), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'alert alert-info bg-body has-icon m-xs-b-0' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-lg ficon-info-circle alert-icon' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'If you change the font-size of the icon\\'s container, the icon gets bigger. Same things goes for color, drop shadow, and anything else you can imagine with CSS.'))), iconSettings.largerIconSizes ? this.renderIconSizes(cssPrefix) : '', iconSettings.fixedWidthIcons ? this.renderIconFixedWidth(cssPrefix) : '', iconSettings.listIcons ? this.renderIconLists(cssPrefix) : '', iconSettings.borderedPulledIcons ? this.renderIconBordered(cssPrefix) : '', iconSettings.spinningIcons ? this.renderIconAnimated(cssPrefix) : '', iconSettings.rotatedFlippedIcons ? this.renderIconRotated(cssPrefix) : '', iconSettings.stackedIcons ? this.renderIconStacked(cssPrefix) : '', this.renderIconManual());\n },\n renderUsingIconsOnDesktop: function renderUsingIconsOnDesktop() {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('section', { className: 'kit-components-icons-use m-xs-b-xl', id: 'kit-components-icons-use-desktop' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h2', { className: 'text-2x m-xs-b-0' }, 'Using your icons on the desktop'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('hr', { className: 'hr-lg m-xs-y-sm' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'Looking to use your kit\\'s icons in design-based desktop apps? You can them both as a icon-font (a la how you would use Font Awesome\\'s cheatsheet) or leverage the raw SVG versions of each.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg gg-top m-xs-b-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg-col min-width' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'text-gray-lighter ficon ficon-circle-1 ficon-2x m-xs-r-md' })), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg-col' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'm-xs-t-0 m-xs-b-xs text-base' }, 'Publish Your Kit'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'When you publish, Fort Awesome packages up and optimizes all of your assets. We also refresh your kit\\'s documentation. If you\\'ve made a change you want to use, ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('strong', { className: 'font-weight-semibold' }, 'make sure you publish'), '.'))), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg gg-top m-xs-b-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg-col min-width' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'text-gray-lighter ficon ficon-circle-2 ficon-2x m-xs-r-md' })), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg-col' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'm-xs-t-0 m-xs-b-xs text-base' }, 'Download Your Kit'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'After your kit has been published, you\\'ll want to ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('strong', { className: 'font-weight-semibold' }, 'download a fresh copy of your kit\\'s contents'), ' locally.'))), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg gg-top m-xs-b-lg' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg-col min-width' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'text-gray-lighter ficon ficon-circle-3 ficon-2x m-xs-r-md' })), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'gg-col' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'm-xs-t-0 m-xs-b-xs text-base' }, 'Use Icon Fonts or SVGs'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'Find the ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, '*.otf'), ' files in your downloaded kit, set it as the font in your current desktop application, and copy and paste the icons (not the unicode) directly from your kit\\'s documentation into your designs. Conversely, you can also open any of the individual ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, '*.svg'), ' files for deeper manipulation.'))));\n },\n renderTroubleshootingIcons: function renderTroubleshootingIcons() {\n var _resources4 = this.resources(),\n iconSettings = _resources4.iconSettings;\n\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('section', { className: 'kit-components-icons-troubleshooting', id: 'kit-components-icons-troubleshooting' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h2', { className: 'text-2x m-xs-b-0' }, 'Troubleshooting Icons'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('hr', { className: 'hr-lg m-xs-y-sm' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'typefaces-weights m-xs-b-lg', id: 'typefaces-weights' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'text-lg' }, 'My kit\\'s icons aren\\'t showing up on my pages'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'If your icons aren\\'t rendering properly, you\\'ll want to check the following:'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('ul', null, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('li', null, 'Did you published all changes/updates to you kit?'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('li', null, 'Did you either reference your kit\\'s embed code or the path to downloaded assets in your pages\\' ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, ''), '?'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('li', null, 'Did you reference the correct icon name? Check for typos (we know by experience)!'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('li', null, 'Are you using any other Icon Font libraries with the same kit prefix (', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, iconSettings.cssPrefix, '-'), ') as your kit?'))));\n },\n renderUnpublishedChangesAlert: function renderUnpublishedChangesAlert() {\n var retval = null;\n\n var kitMutations = this.props.kitMutations;\n\n var _resources5 = this.resources(),\n kit = _resources5.kit;\n\n var iconsHaveBeenAdded = !Object(__WEBPACK_IMPORTED_MODULE_13__utils_kit__[\"a\" /* iconsAdded */])(kitMutations, kit.token).isEmpty();\n\n if (iconsHaveBeenAdded) {\n retval = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'alert alert-primary bg-body has-icon m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('i', { className: 'ficon ficon-lg ficon-warning alert-icon' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'Hmm, you\\'ve added some icons that you haven\\'t published yet. ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('strong', null, 'Publish to see them here'), ' and to use them in your project.'));\n }\n\n return retval;\n },\n renderMain: function renderMain() {\n var _resources6 = this.resources(),\n kit = _resources6.kit,\n finishedPublications = _resources6.finishedPublications;\n\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'row' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'col-xs-3 col-xs-push-9 p-xs-l-xl' }, this.renderNavigation(kit, { hasBeenPublished: !finishedPublications.isEmpty() })), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'col-xs-9 col-xs-pull-3' }, this.renderUnpublishedChangesAlert(), this.renderIconsInKit(), this.renderUsingIconsOnWeb(), this.renderUsingIconsOnDesktop(), this.renderTroubleshootingIcons()));\n },\n renderSpinner: function renderSpinner() {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'is-loading is-loading-documentation-icons m-xs-x-0 bg-body p-xs-a-xl br-a' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_15_components_Spinner__[\"c\" /* default */], { size: __WEBPACK_IMPORTED_MODULE_15_components_Spinner__[\"b\" /* SIZE_LARGE */] }));\n },\n render: function render() {\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_11_requests_components__[\"d\" /* ResourcesMatching */], { manager: this.resourceManager() }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_11_requests_components__[\"c\" /* Requesting */], { any: true, render: this.renderSpinner }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_11_requests_components__[\"a\" /* Done */], { all: true, render: this.renderMain }));\n }\n});\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Object(__WEBPACK_IMPORTED_MODULE_9_react_redux__[\"b\" /* connect */])(mapStateToProps)(DocumentationIconsController));\n\n/***/ }),\n\n/***/ 471:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_create_react_class__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_create_react_class___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_create_react_class__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types__ = __webpack_require__(2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_prop_types__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_react_dom__ = __webpack_require__(104);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_react_dom___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_react_dom__);\n\n\n\n\n\nvar noop = function noop() {};\nvar FIX_IFRAME_HEIGHT_INTERVAL = 200; // in ms\n\nvar Frame = __WEBPACK_IMPORTED_MODULE_1_create_react_class___default()({\n displayName: 'Frame',\n\n propTypes: {\n kitToken: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.string,\n children: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.element,\n style: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.object,\n initialContent: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.string,\n mountTarget: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.string,\n contentDidMount: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.func,\n contentDidUpdate: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.func\n },\n\n getDefaultProps: function getDefaultProps() {\n return {\n initialContent: '',\n contentDidMount: noop,\n contentDidUpdate: noop\n };\n },\n componentDidMount: function componentDidMount() {\n this._isMounted = true;\n this.renderFrameContents();\n },\n componentDidUpdate: function componentDidUpdate() {\n this.renderFrameContents();\n },\n componentWillUnmount: function componentWillUnmount() {\n this._isMounted = false;\n\n var doc = __WEBPACK_IMPORTED_MODULE_3_react_dom___default.a.findDOMNode(this).contentDocument;\n\n if (doc) {\n __WEBPACK_IMPORTED_MODULE_3_react_dom___default.a.unmountComponentAtNode(doc.body);\n }\n },\n getEmbedCodeScriptNode: function getEmbedCodeScriptNode() {\n var element = __WEBPACK_IMPORTED_MODULE_3_react_dom___default.a.findDOMNode(this).contentDocument.createElement('script');\n\n element.setAttribute('src', 'https://' + \"use.fortawesome.com\" + '/' + this.props.kitToken + '.js'); // eslint-disable-line no-undef\n\n return element;\n },\n resizeIFrame: function resizeIFrame() {\n if (!this._isMounted) {\n return;\n }\n\n var iframeElement = __WEBPACK_IMPORTED_MODULE_3_react_dom___default.a.findDOMNode(this);\n var contentDocument = iframeElement.contentDocument;\n var correctHeight = contentDocument.querySelector('body > div').scrollHeight;\n\n if (iframeElement.height !== correctHeight) {\n iframeElement.height = correctHeight;\n }\n\n this._resizeIFrameTimer = setTimeout(this.resizeIFrame, FIX_IFRAME_HEIGHT_INTERVAL);\n },\n renderFrameContents: function renderFrameContents() {\n if (!this._isMounted) {\n return;\n }\n\n var doc = __WEBPACK_IMPORTED_MODULE_3_react_dom___default.a.findDOMNode(this).contentDocument;\n\n if (doc && doc.readyState === 'complete') {\n var initialRender = !this._setInitialContent;\n var contents = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', undefined, this.props.children);\n\n if (!this._setInitialContent) {\n doc.open();\n doc.write(this.props.initialContent);\n doc.close();\n\n doc.body.classList.add('iframe-body');\n doc.body.classList.add('v-kit-doc-partial');\n doc.head.appendChild(document.head.querySelector('link[data-style=\"main\"]').cloneNode());\n doc.head.appendChild(this.getEmbedCodeScriptNode());\n\n this._setInitialContent = true;\n }\n\n var callback = initialRender ? this.props.contentDidMount : this.props.contentDidUpdate;\n var mountTarget = void 0;\n\n if (this.props.mountTarget) {\n mountTarget = doc.querySelector(this.props.mountTarget);\n } else {\n mountTarget = doc.body.children[0];\n }\n\n __WEBPACK_IMPORTED_MODULE_3_react_dom___default.a.unstable_renderSubtreeIntoContainer(this, contents, mountTarget, callback);\n\n this.resizeIFrame();\n } else {\n setTimeout(this.renderFrameContents, 0);\n }\n },\n render: function render() {\n var props = Object.assign({}, this.props);\n\n delete props.initialContent;\n delete props.contentDidMount;\n delete props.contentDidUpdate;\n delete props.kitToken;\n\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('iframe', Object.assign({ style: { border: 'none', width: '100%' }, scrolling: 'no' }, props, { children: undefined }));\n }\n});\n\n/* harmony default export */ __webpack_exports__[\"a\"] = (Frame);\n\n/***/ }),\n\n/***/ 472:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_create_react_class__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_create_react_class___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_create_react_class__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types__ = __webpack_require__(2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_prop_types__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_react_immutable_render_mixin__ = __webpack_require__(5);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_react_immutable_render_mixin___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_react_immutable_render_mixin__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react_immutable_proptypes__ = __webpack_require__(10);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react_immutable_proptypes___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_react_immutable_proptypes__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_react_router__ = __webpack_require__(8);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_immutable__ = __webpack_require__(6);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_immutable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_immutable__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react_redux__ = __webpack_require__(7);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_records__ = __webpack_require__(109);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_requests__ = __webpack_require__(9);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_requests_components__ = __webpack_require__(15);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11_components_KitFrame__ = __webpack_require__(471);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__utils_kit__ = __webpack_require__(146);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__mixins_DocumentationMixin__ = __webpack_require__(147);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14_components_Spinner__ = __webpack_require__(13);\nfunction _toConsumableArray(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }return arr2;\n } else {\n return Array.from(arr);\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar mapStateToProps = function mapStateToProps(state, ownProps) {\n var kitToken = ownProps.kitToken || ownProps.params.kitToken;\n\n return {\n kitToken: kitToken,\n requests: state.requests,\n kitMutations: state.kitMutations\n };\n};\n\nvar DocumentationTypefacesController = __WEBPACK_IMPORTED_MODULE_1_create_react_class___default()({\n displayName: 'DocumentationTypefacesController',\n\n propTypes: {\n dispatch: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.func.isRequired,\n kitToken: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.string.isRequired,\n requests: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.object.isRequired,\n kitMutations: __WEBPACK_IMPORTED_MODULE_4_react_immutable_proptypes___default.a.map\n },\n\n mixins: [__WEBPACK_IMPORTED_MODULE_13__mixins_DocumentationMixin__[\"a\" /* default */], __WEBPACK_IMPORTED_MODULE_9_requests__[\"f\" /* RequestsMixin */], __WEBPACK_IMPORTED_MODULE_3_react_immutable_render_mixin___default.a],\n\n componentWillMount: function componentWillMount() {\n this.setRequest({\n kit: new __WEBPACK_IMPORTED_MODULE_9_requests__[\"e\" /* Request */]({\n method: __WEBPACK_IMPORTED_MODULE_9_requests__[\"b\" /* GET */],\n url: ['api', 'kits', this.props.kitToken]\n })\n });\n\n this.setRequest({\n publications: new __WEBPACK_IMPORTED_MODULE_9_requests__[\"e\" /* Request */]({\n method: __WEBPACK_IMPORTED_MODULE_9_requests__[\"b\" /* GET */],\n url: ['api', 'kits', this.props.kitToken, 'publications']\n })\n });\n\n this.setRequest({\n iconSettings: new __WEBPACK_IMPORTED_MODULE_9_requests__[\"e\" /* Request */]({\n method: __WEBPACK_IMPORTED_MODULE_9_requests__[\"b\" /* GET */],\n url: ['api', 'kits', this.props.kitToken, 'icon-settings']\n })\n });\n\n this.setRequest({\n workingSetTypefaces: new __WEBPACK_IMPORTED_MODULE_9_requests__[\"e\" /* Request */]({\n method: __WEBPACK_IMPORTED_MODULE_9_requests__[\"b\" /* GET */],\n url: ['api', 'kits', this.props.kitToken, 'working-set-typefaces']\n })\n });\n },\n resources: function resources() {\n var rm = this.resourceManager();\n\n return {\n kit: rm.type(this.requests.kit, 'kits').find({ token: this.props.kitToken }),\n finishedPublications: rm.type(this.requests.publications, 'publications').all().filter(function (p) {\n return p.status === 'finished';\n }),\n iconSettings: rm.type(this.requests.iconSettings, 'icon-settings').get(),\n workingSetTypefaces: rm.type(this.requests.workingSetTypefaces, 'working-set-typefaces').all()\n };\n },\n renderUsingTypefacesOnWeb: function renderUsingTypefacesOnWeb() {\n var _resources = this.resources(),\n kit = _resources.kit,\n iconSettings = _resources.iconSettings;\n\n return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('section', { className: 'kit-components-typefaces-use m-xs-b-xl', id: 'kit-components-typefaces-use' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h2', { className: 'text-2x m-xs-b-0' }, 'Using your typefaces on the web'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('hr', { className: 'hr-lg m-xs-y-sm' }), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'Fort Awesome takes care of the set up (using CSS\\'s ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, '@font-face'), ') of using custom fonts on the web. If you are using Fort Awesome\\'s CDN, all you need do is follow the ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_5_react_router__[\"b\" /* Link */], { to: '/kits/' + kit.token + '/docs' }, 'getting started instructions'), ' to publish (or download) your kit and reference its updated embed code in your project.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'Once you are referencing your kit\\'s assets, you have a couple of ways you can call your typefaces:'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'example m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'text-lg' }, 'Referencing font names in your CSS rules (recommended)'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'Fort Awesome takes the names you gave your kit\\'s typefaces and creates unique ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, 'font-family'), 'names you can reference within your project\\'s CSS. You have typographical control and can make broad rules so that as much or as little of your content renders in a specific font. Below are examples of rules to add to your CSS.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0', role: 'alert' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'This example contains typefaces which may not be in your kit')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'css' }, '// I\\'m a broad reference', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), 'body ', '{', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0font-family: \"Lato\";', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0...', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '}')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0', role: 'alert' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'This example contains typefaces which may not be in your kit')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'css' }, '// I\\'m a very specific reference', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), 'footer.app .about ', '{', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0font-family: \"Lato\";', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0...', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '}'))), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('article', { className: 'example m-xs-b-xl' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('h3', { className: 'text-lg' }, 'Using utility classes in your HTML'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', null, 'Fort Awesome also creates some useful preset CSS rules and HTML class names to make it easier to display the right typeface in a pinch. After you publish your kit, you\\'ll be able to add a unique per-typeface ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', null, 'class'), ' attribute to any HTML element.'), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0', role: 'alert' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'This example contains typefaces which may not be in your kit')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'html' }, '
', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0This text will be rendered in Lato', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '
')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('div', { className: 'well bg-gray-lightest text-sm text-muted br-b-0 m-xs-b-0', role: 'alert' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('p', { className: 'm-xs-b-0' }, 'This example contains typefaces which may not be in your kit')), __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('pre', { className: 'bg-gray-dark inset-darkest br-b p-xs-a-md' }, __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('code', { className: 'html' }, '
', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0This text will be rendered in Lato,', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '\\xA0\\xA0 while this text will be rendered in Open Sans ', __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('br', null), '
Less than {SHOULD_TAKE_LESS_THAN} minutes to complete this should take.
\n
\n\n
\n
We're updating some of your kit's behind-the-scenes technical details. None of your icons, typefaces, or images will be changed or published during this process.
\n
\n Taking far longer than expected?\n Let us know\n
\n
\n
\n );\n },\n\n renderTimedOut() {\n return (\n
\n\n
\n
\n \n Failed, we have.\n
\n\n
Update your kit we could not. Help you must seek.
\n
\n\n
\n
\n We were not able to complete maintenance on your kit. Please\n Let us know\n and we'll help get things back on track.\n
\n Your kit, and its contents have been polished and tuned to work with the latest and greatest Fort Awesome updates. Go ahead and jump back into making something awesome.\n
\n Choose from our awesome icon sets\n and upload your own. \n We’ll turn them into an icon font that’s speedy, bulletproof, and super-simple-to-use (just like Font Awesome).\n
\n Choose from our hand-picked typefaces and upload your own. \n We’ll help you subset down to just the languages your site uses, then serve them up right on your site.\n
\n He smiled understandingly-much more than understandingly. It was one of those rare smiles with a quality\n of eternal reassurance in it, that you may come across four or five times in life. It faced–or seemed to\n face–the whole eternal world for an instant, and then concentrated on you with an irresistible prejudice in\n your favor. It understood you just as far as you wanted to be understood, believed in you as you would like\n to believe in yourself, and assured you that it had precisely the impression of you that, at your best, you\n hoped to convey.\n
\n );\n },\n};\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/views/Kits/mixins/DocumentationMixin.js","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {Map} from 'immutable';\nimport ImmutablePropTypes from 'react-immutable-proptypes';\nimport IconRow from '../components/IconRow';\nimport {SMALL_ICONS_PER_ROW} from '../settings';\n\nexport const SIZE_SMALL = 56;\nexport const SIZE_LARGE = 112;\n\nexport default {\n propTypes: {\n workingSetIcons: ImmutablePropTypes.listOf(\n ImmutablePropTypes.record\n ),\n iconSetIdsInSubscription: ImmutablePropTypes.listOf(\n PropTypes.number\n ).isRequired,\n iconSetsByIconId: ImmutablePropTypes.map,\n onIconSelected: PropTypes.func.isRequired,\n onIconDeselected: PropTypes.func.isRequired,\n onRequestToBuy: PropTypes.func.isRequired,\n onRequestToUpgrade: PropTypes.func.isRequired,\n },\n\n getInitialState() {\n return {\n focused: null,\n };\n },\n\n handleIconFocused(icon) {\n this.setState({\n focused: icon,\n });\n },\n\n renderIcons(icons, size, options = {}) {\n const optionsWithDefaults = Object.assign(\n {},\n {rowCount: SMALL_ICONS_PER_ROW, addIconSetName: false, highlightedIconNames: Map()},\n options\n );\n const iconElements = [];\n const pushElements = (num, iconsSlice, rowKey = 0) => {\n iconElements.push(\n \n );\n\n if (iconsSlice.size > num) {\n pushElements(num, iconsSlice.skip(num), rowKey + 1);\n }\n };\n\n pushElements(optionsWithDefaults.rowCount, icons);\n\n return iconElements;\n },\n};\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/views/Kits/mixins/IconMixin.js","import {fromJS, Map, List} from 'immutable';\nimport * as actionTypes from 'requests/actionTypes';\nimport {POST, DELETE} from 'requests/methods';\nimport {PUBLISHED} from 'actions';\n\nconst LOCAL_STORAGE_KEY = 'kitMutations';\n\nexport const MUTATION_TYPE_CREATED = 'created';\nexport const MUTATION_TYPE_DELETED = 'deleted';\nexport const MUTATION_TYPE_UNKNOWN = 'unknown';\n\nfunction kitTokenFromRequest(request) {\n const url = request.url;\n let kitToken = null;\n\n if (url[0] === 'api' && url[1] === 'kits' && url.length > 2) {\n kitToken = url[2];\n }\n\n return kitToken;\n}\n\nfunction typeFromRequest(request) {\n const url = request.url;\n let type = null;\n\n if (url.length > 3) {\n type = url[3];\n }\n\n return type;\n}\n\nfunction mutationTypeForRequest(request) {\n let mutationType = MUTATION_TYPE_UNKNOWN;\n\n if (request.method === POST) {\n mutationType = MUTATION_TYPE_CREATED;\n }\n\n if (request.method === DELETE) {\n mutationType = MUTATION_TYPE_DELETED;\n }\n\n return mutationType;\n}\n\nconst fromLocalStorage = () => {\n const defaultValue = JSON.stringify(\n Map({\n changesSinceLastPublish: Map(),\n }).toJS()\n );\n let changesSinceLastPublish;\n\n try {\n changesSinceLastPublish = window.localStorage.getItem(LOCAL_STORAGE_KEY);\n } catch (e) { }\n\n return fromJS(JSON.parse(changesSinceLastPublish || defaultValue));\n};\n\nexport function kitMutations(state = null, action) {\n let nextState = state || fromLocalStorage();\n\n const indicatesMutation = [actionTypes.RESPONSE_CREATED, actionTypes.RESPONSE_DELETED];\n\n if (action.type === PUBLISHED) {\n nextState = nextState.updateIn(['changesSinceLastPublish', action.kitToken], () => Map());\n }\n\n if (~indicatesMutation.indexOf(action.type)) {\n const kitToken = kitTokenFromRequest(action.request);\n const type = typeFromRequest(action.request);\n const mutationType = mutationTypeForRequest(action.request);\n\n if (kitToken && ~['working-set-icons', 'working-set-typefaces', 'working-set-images'].indexOf(type)) {\n nextState = nextState.updateIn(['changesSinceLastPublish', kitToken, type, mutationType], List(), (changesSinceLastPublish) => {\n return changesSinceLastPublish.push(action.request.toImmutable());\n });\n }\n }\n\n try {\n window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(nextState.toJS()));\n } catch (e) {}\n\n return nextState;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/reducers/publish.js","import Promise from 'bluebird';\nimport fetch from 'utils/fetch';\nimport formEncode from 'form-urlencoded';\nimport decamelize from 'decamelize';\nimport {getFromMeta} from 'utils/shareResourceToken';\nimport Request from './Request';\nimport * as responseHandlers from './responseHandlers';\nimport * as actionTypes from './actionTypes';\nimport {PUT, POST} from './methods';\nimport {PRODUCTION} from 'utils/env';\n\nfunction routeResponse(request, response) {\n const statusCode = response.status;\n const responseHandler = responseHandlers[`handle${statusCode}`];\n let promise = null;\n\n if (responseHandler) {\n promise = responseHandler(request, response);\n } else {\n promise = Promise.resolve({\n type: actionTypes.RESPONSE_UNHANDLED_STATUS_CODE,\n request,\n response,\n });\n }\n\n return promise;\n}\n\nexport function encodeRecordToBody(record) {\n const neverEncodeKeys = ['link'];\n const mapped = record\n .toMap()\n .mapEntries((entry) => {\n return [decamelize(entry[0], '_'), (entry[1] && entry[1].toJS) ? entry[1].toJS() : entry[1]];\n })\n .filterNot((value, key) => {\n return value === null || ~neverEncodeKeys.indexOf(key);\n });\n\n return formEncode(mapped.toJS());\n}\n\nfunction makeRequest(dispatch, request) {\n const {url, method, record} = request;\n const fetchOptions = {\n url,\n method,\n headers: {},\n };\n const shareResourceToken = getFromMeta();\n const isNewOrUpdate = ~[PUT, POST].indexOf(request.method);\n\n if (!PRODUCTION && !record && isNewOrUpdate) {\n console.warn('A request was created as a POST or PUT but no associated record was found. This will fail to add or update any new records in existing representations.');\n }\n\n if (shareResourceToken) {\n fetchOptions.headers.Authorization = `Bearer ${shareResourceToken}`;\n }\n\n if (record && isNewOrUpdate) {\n fetchOptions.body = encodeRecordToBody(record);\n fetchOptions.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';\n }\n\n return fetch(`/${url.join('/')}`, fetchOptions)\n .then((response) => {\n return routeResponse(request, response)\n .then((action) => {\n return dispatch(action);\n });\n })\n .catch((error) => {\n dispatch({\n type: actionTypes.REQUEST_UNCAUGHT_ERROR,\n request,\n error,\n });\n\n if (!PRODUCTION) {\n throw error;\n }\n });\n}\n\nexport function queueRequests(requests) {\n return (dispatch) => {\n const fetches = [];\n\n try {\n for (const request of requests) {\n dispatch({\n type: actionTypes.REQUEST_QUEUED,\n request,\n });\n\n fetches.push(makeRequest(dispatch, request));\n }\n } catch (error) {\n dispatch({\n type: actionTypes.REQUEST_UNCAUGHT_ERROR,\n requests,\n error,\n });\n\n if (!PRODUCTION) {\n throw error;\n }\n }\n\n return Promise.all(fetches);\n };\n}\n\nexport function refreshRecord(record) {\n return (dispatch) => {\n const request = new Request({\n url: record.link,\n useCache: false,\n });\n\n dispatch({\n type: actionTypes.REQUEST_QUEUED,\n request,\n });\n\n makeRequest(dispatch, request);\n };\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/requests/actions.js","export function getFromMeta() {\n const tag = document.querySelector('meta[name=csrf-token]');\n return (tag) ? tag.content : '';\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/utils/csrfToken.js","import {METHODS, GET, DELETE} from './methods';\nimport {fromJS, Record} from 'immutable';\nimport uuid from 'uuid';\n\nconst DEFAULTS = {\n useCache: true,\n method: GET,\n url: [],\n record: null,\n};\n\nclass Request {\n constructor(params = {}) {\n const {\n useCache,\n method,\n url,\n record,\n } = Object.assign({}, DEFAULTS, params);\n\n if (!~METHODS.indexOf(method)) {\n throw Error(`Method \"${method}\" is not valid. It should be one of ${METHODS.join(', ')}`);\n }\n\n if (method === DELETE && !record) {\n throw Error('To send a DELETE request a record is required.');\n }\n\n this.uuid = uuid.v4();\n this.useCache = useCache;\n this.method = method;\n this.url = url;\n this.record = record;\n }\n\n toJS() {\n return {\n uuid: this.uuid,\n useCache: this.useCache,\n method: this.method,\n url: this.url,\n record: (this.record) ? this.record.toJS() : {},\n };\n }\n\n toImmutable() {\n return fromJS(this.toJS());\n }\n}\n\nexport default Request;\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/requests/Request.js","import {Record} from 'immutable';\nimport moment from 'moment';\n\nconst record = Record({\n id: null,\n link: null,\n iconId: null,\n workingSetId: null,\n jobStatusTopic: null,\n status: null,\n icon: null,\n workingSet: null,\n name: '',\n unicodeChar: '',\n optimizedFor: '',\n prefix: '',\n cssName: '',\n cssClass: '',\n logo: false,\n custom: false,\n svg: '',\n woff: '',\n createdAt: null,\n updatedAt: null,\n});\n\nclass WorkingSetIcon extends record {\n get createdAt() {\n return moment(super.createdAt);\n }\n\n get updatedAt() {\n return moment(super.updatedAt);\n }\n}\n\nexport default WorkingSetIcon;\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/records/WorkingSetIcon.js","import {Record} from 'immutable';\nimport moment from 'moment';\n\nconst record = Record({\n id: null,\n jobStatusTopic: null,\n status: null,\n custom: false,\n link: null,\n token: '',\n typeface: null,\n workingSet: null,\n family: '',\n cssClass: '',\n weight: '',\n style: '',\n subsetting: '',\n characterSets: [],\n originalSize: 0,\n optimizedSize: 0,\n woff: '',\n createdAt: null,\n updatedAt: null,\n});\n\nclass WorkingSetTypeface extends record {\n get createdAt() {\n return moment(super.createdAt);\n }\n\n get updatedAt() {\n return moment(super.updatedAt);\n }\n}\n\nexport default WorkingSetTypeface;\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/records/WorkingSetTypeface.js","import camelcase from 'camelcase';\n\nexport function all(iterable) {\n const retval = iterable.reduce((memo, value) => {\n return memo && !!value;\n }, true);\n return retval && ((iterable.size) ? !!iterable.size : !!iterable.length);\n}\n\nexport function any(iterable) {\n const retval = iterable.reduce((memo, value) => {\n return memo || !!value;\n }, false);\n return retval && ((iterable.size) ? !!iterable.size : !!iterable.length);\n}\n\nexport function values(obj) {\n return Object.keys(obj).map((key) => obj[key]);\n}\n\nexport function arrayize(obj) {\n if (!obj) {\n return [];\n }\n\n return (Array.isArray(obj)) ? obj : [obj];\n}\n\nexport function camelCast(attributes) {\n return Object.keys(attributes).map((key) => {\n return [camelcase(key), attributes[key]];\n });\n}\n\nexport function getOrSetArray(subject, type) {\n if (!subject[type]) {\n subject[type] = []; // eslint-disable-line no-param-reassign\n }\n return subject[type];\n}\n\nexport function isArrayOfStrings(subject) {\n let value = true;\n\n if (!Array.isArray(subject)) {\n value = false;\n } else {\n for (const elem of subject) {\n if (typeof elem !== \"string\") {\n value = false;\n }\n }\n }\n\n return value;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/requests/utils.js","import {Map} from 'immutable';\nimport {PRODUCTION} from 'utils/env';\nimport {camelCast, isArrayOfStrings} from 'requests/utils';\nimport * as actionTypes from '../actionTypes';\nimport {retrieved, deleted, created, noContent, jobStatusTopic} from './updaters';\n\nexport const QUEUED = '--queued--';\nexport const UNKNOWN = '--unknown--';\nexport const OK_BUT_MISUNDERSTOOD = '--ok-but-misunderstood--';\n\nexport function requests(state = null, action) {\n let nextState = state || Map({\n representations: Map({}),\n resources: Map({}),\n jobs: Map({}),\n cache: Map({}),\n status: Map({}),\n errors: Map({}),\n });\n\n if (action.request) {\n nextState = nextState\n .setIn(['cache', action.request.uuid], action.request);\n }\n\n if (action.type === actionTypes.REQUEST_QUEUED) {\n nextState = nextState\n .setIn(['status', action.request.uuid], QUEUED);\n }\n\n if (action.type === actionTypes.RESPONSE_UNHANDLED_STATUS_CODE) {\n if (!PRODUCTION) {\n /* eslint-disable no-console */\n console.error('Unhandled status code for requests action');\n console.log(action);\n /* eslint-enable no-console */\n }\n\n nextState = nextState\n .setIn(['status', action.request.uuid], UNKNOWN);\n }\n\n if (action.type === actionTypes.RESPONSE_NOT_JSON) {\n nextState = nextState\n .setIn(['status', action.request.uuid], OK_BUT_MISUNDERSTOOD);\n }\n\n if (~[actionTypes.RESPONSE_DATA, actionTypes.RESPONSE_CREATED].indexOf(action.type)) {\n nextState = retrieved(nextState, action);\n }\n\n if (action.type === actionTypes.RESPONSE_CREATED) {\n nextState = created(nextState, action);\n }\n\n if (action.type === actionTypes.RESPONSE_DELETED) {\n nextState = deleted(nextState, action);\n }\n\n if (~[actionTypes.RESPONSE_DATA, actionTypes.RESPONSE_CREATED].indexOf(action.type)) {\n nextState = jobStatusTopic(nextState, action);\n }\n\n if (action.type === actionTypes.RESPONSE_NO_CONTENT) {\n nextState = noContent(nextState, action);\n }\n\n if (~[actionTypes.RESPONSE_NOT_FOUND, actionTypes.RESPONSE_NOT_ALLOWED].indexOf(action.type)) {\n nextState = nextState\n .setIn(['status', action.request.uuid], action.response.status);\n }\n\n if (action.type === actionTypes.RESPONSE_BAD_REQUEST) {\n const nextErrors = Map(camelCast(action.errors)).map((error) => {\n return (isArrayOfStrings(error)) ? error.join(', ') : error;\n });\n nextState = nextState\n .setIn(['status', action.request.uuid], action.response.status)\n .setIn(['errors', action.request.uuid], nextErrors);\n }\n\n if (action.type === actionTypes.RESPONSE_FAILURE) {\n nextState = nextState\n .setIn(['status', action.request.uuid], action.response.status);\n }\n\n return nextState;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/requests/reducers/index.js","import {client} from 'utils/algolia';\nimport {locationUpdate} from 'actions';\nimport {HITS_PER_PAGE} from '../settings';\n\nexport const SEARCH_FOR_SET_NEW_QUERY = 'SEARCH_FOR_SET_NEW_QUERY';\nexport const SEARCH_FOR_SET_RESULTS = 'SEARCH_FOR_SET_RESULTS';\n\nexport function searchForSet(query, index) {\n const hitsPerPage = HITS_PER_PAGE;\n\n return (dispatch) => {\n dispatch(locationUpdate({\n query: {\n q: query,\n },\n }));\n\n dispatch({\n type: SEARCH_FOR_SET_NEW_QUERY,\n query,\n });\n\n client()\n .initIndex(index)\n .search(query, {hitsPerPage})\n .then((results) => {\n dispatch({\n type: SEARCH_FOR_SET_RESULTS,\n query,\n hits: results.hits,\n hitsPerPage,\n count: results.nbHits,\n });\n });\n };\n}\n\nexport function navigateToSet(iconSetSlug) {\n location.assign(`/sets/${iconSetSlug}`);\n\n return (dispatch) => {};\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/views/Sets/actions/index.js","import React from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport {default as Tooltip} from 'components/Tooltip';\nimport NavLink from 'components/NavLink';\nimport Feature from 'components/Feature';\nimport Modal from 'components/Modal';\n\nexport default {\n getInitialState() {\n return {\n showEmbedCode: false,\n downloadFocused: false,\n embedCodeCopied: false,\n };\n },\n\n handleEmbedCodeOpened(event) {\n event.preventDefault();\n\n this.setState({showEmbedCode: true});\n },\n\n handleEmbedCodeClosed() {\n this.setState({showEmbedCode: false, embedCodeCopied: false});\n },\n\n handleDownloadFocused() {\n this.setState({downloadFocused: !this.state.downloadFocused});\n },\n\n handleDownloadClicked(event) {\n const {\n kitToken,\n } = this.props;\n const {\n kit: kitRequest,\n } = this.requests;\n\n const rm = this.resourceManager();\n const kit = rm.type(kitRequest, 'kits').find({token: kitToken});\n\n if (!kit.downloadable) {\n event.preventDefault();\n }\n },\n\n handleEmbedCodeCopied() {\n this.setState({embedCodeCopied: true});\n },\n\n renderEmbedCodeModal(kit) {\n const {showEmbedCode, embedCodeCopied, embedCodeUrl, embedCodeScriptTag} = this.state;\n const embedCodeCopiedPopover = (embedCodeCopied) ? : null;\n const cachingNotice = (\n
\n Your embed code is set to live in the browser's cache for 1\n minute. This means that you will need to wait a full\n minute after publishing to see your changes reflected. If you're\n impatient (like we are) you can force reload your page or clear your\n browser's cache.\n
\n );\n const existingCodePromptElement = (\n
\n \n {cachingNotice}\n
If you're replacing an existing icon font with Fort Awesome, don't forget to remove it from your website.
\n
If you're using Fort Awesome alongside an existing icon font (like Font Awesome), remember to use a different CSS prefix.
\n
\n );\n\n let value = null;\n\n if (embedCodeScriptTag) {\n value = (\n \n
\n
\n \n
\n Embed Code\n
\n
\n
\n
\n After your kit has been published, copy and paste the following embed code into the\n HTML of your website. Make sure it goes near the top of your <head> tag.\n
\n The easiest way to use your kit - no need to manually update source files, maximum performance\n optimization, and use your kit with a single line of code.\n
\n
\n
\n
\n
Publish Your Kit
\n
\n When you publish, Fort Awesome packages up and optimizes all of your assets. We also refresh your kit's\n documentation and bust any caches (with extreme prejudice). If you've made a change you want to\n use, make sure you publish.\n
\n
\n
\n
\n
\n
\n
Reference Your Kit in Your Code
\n
\n After your kit has been published, copy and paste the kit's\n unique embed code into the HTML of your website. Make sure it goes near the top of\n your <head> tag.\n
\n
This Kit's Embed Code
\n\n
\n
\n {embedCodeScriptTag}\n
\n
\n {embedCodeCopiedPopover}\n \n \n \n
\n
\n\n
\n \n
\n If you're switching over to Fort Awesome from an existing icon font, don't forget to remove\n it from your website.\n
\n
\n If you're using Fort Awesome alongside an existing icon font (like Font Awesome), remember to use a different CSS prefix.\n
\n
\n If you'd like to use the CSS directly you can reference the WOFF CSS, WOFF2 CSS, or EOT CSS.\n
\n
\n
\n
\n
\n
\n
\n
Call icons and typefaces in your UI
\n
\n You'll then be able to call your icons and typefaces as you've set them up. Learn how to use\n your icons and\n typefaces.\n
\n Want to place your files just so and serve them up your way and in your existing workflows? We completely\n get that. You can do so while still getting Fort Awesome's variety, customization, and bulletproof rendering.\n
\n
\n
\n
\n
Publish Your Kit
\n
\n When you publish, Fort Awesome packages up and optimizes all of your assets. We also refresh your kit's\n documentation and bust any caches (with extreme prejudice). If you've made a change you want to use,\n make sure you publish.\n
\n
\n
\n
\n
\n
\n
Download Your Kit
\n
\n After your kit has been published, you'll want to download a\n fresh copy of your kit's contents and move them alongside your project's files.\n
\n
\n
\n
\n
\n
\n
Call icons and typefaces in your UI
\n
\n Directly in your code, you'll then be able to call your icons and typefaces as you've set them up.\n Each kit comes with detailed documentation on how to reference\n every asset you've added. Be sure to read and share it with your team.\n
\n Looking to use your kit's icons in design-based desktop apps? You can them both as a icon-font (a la how you\n would use Font Awesome's cheatsheet) or leverage the raw SVG versions of each.\n
\n
\n
\n
\n
Publish Your Kit
\n
\n When you publish, Fort Awesome packages up and optimizes all of your assets. We also refresh your kit's\n documentation. If you've made a change you want to use, make\n sure you publish.\n
\n
\n
\n
\n
\n
\n
Download Your Kit
\n
After your kit has been published, you'll want to download a fresh copy of your kit's contents locally.
\n
\n
\n
\n
\n
\n
Use Icon Fonts or SVGs
\n
\n Find the *.otf files in your downloaded kit, set it as the font in your current desktop\n application, and copy and paste the icons (not the unicode) directly from your kit's documentation into\n your designs. Conversely, you can also open any of the individual *.svg files for\n deeper manipulation.\n
\n If you haven't already, you'll want to add icons and typefaces for your site to use. Fort Awesome will\n take it from there when it comes to performance, and ease of use. Not sure where to start? Here are a few\n pointers:\n
\n Heads up! You're using the same icon prefix (fa-) as Font\n Awesome uses. If you want to keep using both, you should either 1) change your kit's icon prefix\n (found in icon settings) to avoid any icon collisions, or add all of the Font Awesome icons you're\n using into your kit and remove the reference to Font Awesome.\n
\n To increase icon sizes relative to their container, add one of the {cssPrefix}-lg (33% increase),\n {cssPrefix}-2x, {cssPrefix}-3x, {cssPrefix}-4x, or {cssPrefix}-5xclasses.\n
\n Use {cssPrefix}-fw to set icons at a fixed width. Great to use when different icon\n widths throw off alignment. Especially useful in things like nav lists & list groups.\n
\n
\n
\n This example contains icons which may not be in your kit\n
\n Use {cssPrefix}-border and pull-right or pull-left\n for easy pull quotes or article icons.\n
\n
\n
\n This example contains icons which may not be in your kit\n
\n
\n
\n
Example
\n Gatsby believed in the green\n light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no\n matter—tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat\n on, boats against the current, borne back ceaselessly into the past.\n
\n
\n \n <i\n class=\n \"{cssPrefix} {cssPrefix}-quote-left {cssPrefix}-3x pull-left {cssPrefix}-border\"\n ></i>Gatsby believed in the green light...\n \n
\n To stack multiple icons, use the {cssPrefix}-stack class on the parent,\n the {cssPrefix}-stack-1x for the regularly sized icon, and {cssPrefix}-stack-2x\n for the larger icon. {cssPrefix}-inverse can be used as an alternative icon color. You can\n even throw larger icon classes on the parent to get further control of sizing.\n
\n
\n
\n This example contains icons which may not be in your kit\n
\n
\n
\n
Example
\n \n \n \n \n {cssPrefix}-twitter on {cssPrefix}-square-o\n \n \n \n \n \n {cssPrefix}-flag on {cssPrefix}-circle\n \n \n \n \n \n {cssPrefix}-code on {cssPrefix}-square\n \n \n \n \n \n {cssPrefix}-ban on {cssPrefix}-camera\n
\n You can place your Fort Awesome icons just about anywhere using your CSS kit prefix\n {iconSettings.cssPrefix} and the icon's name. Fort Awesome icons are designed to be used with inline\n elements (we like the <i> tag, but you can use <span> too).\n
\n If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color,\n drop shadow, and anything else you can imagine with CSS.\n
\n Looking to use your kit's icons in design-based desktop apps? You can them both as a icon-font (a la how\n you would use Font Awesome's cheatsheet) or leverage the raw SVG versions of each.\n
\n
\n
\n
\n
Publish Your Kit
\n
\n When you publish, Fort Awesome packages up and optimizes all of your assets. We also refresh your kit's\n documentation. If you've made a change you want to use, make\n sure you publish.\n
\n
\n
\n
\n
\n
\n
Download Your Kit
\n
\n After your kit has been published, you'll want to download a\n fresh copy of your kit's contents locally.\n
\n
\n
\n
\n
\n
\n
Use Icon Fonts or SVGs
\n
\n Find the *.otf files in your downloaded kit, set it as the font in your current desktop\n application, and copy and paste the icons (not the unicode) directly from your kit's documentation into\n your designs. Conversely, you can also open any of the individual *.svg files for deeper\n manipulation.\n
\n Fort Awesome takes care of the set up (using CSS's @font-face) of using custom fonts on\n the web. If you are using Fort Awesome's CDN, all you need do is follow the \n getting started instructions to publish (or download) your\n kit and reference its updated embed code in your project.\n
\n
\n Once you are referencing your kit's assets, you have a couple of ways you can call your typefaces:\n
\n \n
Referencing font names in your CSS rules (recommended)
\n
\n Fort Awesome takes the names you gave your kit's typefaces and creates unique font-family\n names you can reference within your project's CSS. You have typographical control and can make broad\n rules so that as much or as little of your content renders in a specific font. Below are examples of\n rules to add to your CSS.\n
\n\n
\n
\n This example contains typefaces which may not be in your kit\n
\n
\n
\n \n // I'm a broad reference \n body {'{'} \n font-family: \"Lato\"; \n ... \n {'}'}\n \n
\n\n
\n
\n This example contains typefaces which may not be in your kit\n
\n
\n
\n \n // I'm a very specific reference \n footer.app .about {'{'} \n font-family: \"Lato\"; \n ... \n {'}'}\n \n
\n \n \n
Using utility classes in your HTML
\n
\n Fort Awesome also creates some useful preset CSS rules and HTML class names to make it easier to\n display the right typeface in a pinch. After you publish your kit, you'll be able to add a unique\n per-typeface class attribute to any HTML element.\n
\n\n
\n
\n This example contains typefaces which may not be in your kit\n
\n
\n
\n \n <p class=\"{iconSettings.cssPrefix}-lato\"> \n This text will be rendered in Lato \n </p>\n \n
\n\n
\n
\n This example contains typefaces which may not be in your kit\n
\n
\n
\n \n <p class=\"{iconSettings.cssPrefix}-lato\"> \n This text will be rendered in Lato, \n <span class=\"{iconSettings.cssPrefix}-open-sans\">\n while this text will be rendered in Open Sans\n </span> \n </p>\n \n
\n );\n },\n});\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/views/Kits/components/HelpUploadingIcons.js","import React from 'react';\nimport createReactClass from 'create-react-class';\nimport PropTypes from 'prop-types';\n\nconst WHAT_TO_DO_FOR_CODES = {\n PARSE_FAILED: \"Try re-exporting as a standards-compliant SVG.\",\n SHAPE_STROKES: \"Remove or expand any strokes.\",\n LOTS_OF_POINTS: \"Try simplifying your object by removing points or merging objects together.\",\n OVERLAPPING_POINTS: \"Look through your layers for objects sitting underneath other objects and remove them if they are not needed.\",\n SKETCH_FORMAT: \"Export the file as SVG.\",\n INKSCAPE_FORMAT: \"Export the file as SVG.\",\n LOW_PRECISION: \"Resize your artboard to a height of 1008 and resize your icon to fit inside the larger area.\",\n INVISIBLE_OBJECTS: \"Remove any objects that are not part of your icon.\",\n EVERYTHING_HIDDEN: \"Check the file and try exporting a new SVG. You may need to create a brand new document in your editor and start from scratch.\",\n CONTAINS_IMAGES: \"Remove any images because they cannot be converted into icons.\",\n MISSING_VIEWBOX: \"Make sure your SVG has a \\\"viewBox\\\", which the spec requires. Try exporting a new SVG, maybe?\",\n IS_SVG_FONT: \"Get the original icons from this SVG Font and use those instead.\",\n EXCEEDS_VIEWBOX: \"Double-check that you intend to have objects outside the artboard.\",\n CONTAINS_TEXT: \"Convert text objects that use fonts to outlines.\",\n};\n\nconst SvgInspection = createReactClass({\n propTypes: {\n results: PropTypes.object.isRequired,\n onContinueAnyway: PropTypes.func.isRequired,\n },\n\n resultsToString() {\n const {results} = this.props;\n const {errors, warnings} = results.messages;\n const messagesToString = (messages) => [...messages].map((message) => message.desc).join(', ');\n const errorsAsString = (errors.length > 0) ? `errors: ${messagesToString(errors)}` : '';\n const warningsAsString = (warnings.length > 0) ? `warnings: ${messagesToString(warnings)}` : '';\n\n return `status: ${results.stoplight}; ${errorsAsString}${warningsAsString}`;\n },\n\n renderHelpScoutSupport(type) {\n const prompt = Help! I don't understand this. Let me talk to a Jedi human!;\n\n return {prompt};\n },\n\n renderMessages(messages) {\n return [...messages].map((message, index) => {\n return (\n
\n {message.desc}\n How you can fix this: \n {WHAT_TO_DO_FOR_CODES[message.code]}\n
\n Oh noes! It looks like you’ve hit the max number of icons per kit allowed by\n your plan ({this.props.subscription.iconsPerKitAllowed}).\n Feel free to remove icons or upgrade now to keep adding!\n
\n );\n\t\t} else if (this.props.reason === MAX_CUSTOM_ICONS) {\n title = 'Upgrade for more Custom Icons';\n message = (\n
\n Aw heck! You’re plan is limited to {this.props.subscription.customIconsAllowed} custom icons.\n Upgrade your account to upload more!\n
\n );\n } else if (this.props.reason === NO_CUSTOM_ICONS_ALLOWED) {\n title = 'Upgrade for Custom Icons';\n message = (\n
\n Aw heck! You’re on a plan that doesn’t allow custom icons.\n Upgrade your account now to start uploading!\n
\n );\n } else if (this.props.reason === MAX_TYPEFACES_PER_KIT) {\n title = 'Typeface Limit Reached';\n message = (\n
\n Oh noes! It looks like you’ve hit the max number of typefaces per kit allowed by\n your plan ({this.props.subscription.workingSetTypefacesAllowed}).\n Feel free to remove typefaces or upgrade now to keep adding!\n
\n );\n } else if (this.props.reason === NO_CUSTOM_TYPEFACES_ALLOWED) {\n title = 'Upgrade for Custom Typefaces';\n message = (\n
\n Aw heck! You’re on a plan that doesn’t allow custom typefaces.\n Upgrade your account now to start uploading!\n