Commit be28cb6b authored by Stefan Galinski's avatar Stefan Galinski 🎮
Browse files

[FEATURE] Allow to work with recent fontawesome version that has subdirectories

parent 1411e9b3
...@@ -4,16 +4,15 @@ const fs = require('fs'); ...@@ -4,16 +4,15 @@ const fs = require('fs');
const parseXmlStringSync = require('xml2js-parser').parseStringSync; const parseXmlStringSync = require('xml2js-parser').parseStringSync;
const globby = require('globby'); const globby = require('globby');
const _ = require('underscore'); const _ = require('underscore');
const util = require('util');
const svgToMiniDataURI = require('mini-svg-data-uri'); const svgToMiniDataURI = require('mini-svg-data-uri');
const imagemin = require('imagemin'); const imagemin = require('imagemin');
const imageminSvgo = require('imagemin-svgo'); const imageminSvgo = require('imagemin-svgo');
module.exports = class InlineSvg { module.exports = class InlineSvg {
/** /**
* Kick things off * Kick things off
* *
* @param {String} _svgFilePath The path to the folder containing the SVGs * @param {String} _svgFilePath The path to the folder containing the SVGs
* @param {Object} _options Configuration object * @param {Object} _options Configuration object
* @returns {Promise} * @returns {Promise}
...@@ -32,49 +31,56 @@ module.exports = class InlineSvg { ...@@ -32,49 +31,56 @@ module.exports = class InlineSvg {
/** /**
* Process all SVG files * Process all SVG files
* *
* @param {String} _svgFilePath The path to the folder containing the SVGs * @param {String} _svgFilePath The path to the folder containing the SVGs
*/ */
async _process(_svgFilePath) { async _process(_svgFilePath) {
return new Promise(async (_resolve, _reject) => { return new Promise(async (_resolve, _reject) => {
let svgs = await this._readFiles(_svgFilePath); try {
let templateContent = await imagemin.buffer(this._getTemplateContent(), { let svgs = await this._readFiles(_svgFilePath);
plugins: [ let templateContent = await imagemin.buffer(this._getTemplateContent(), {
imageminSvgo() plugins: [
] imageminSvgo()
}); ]
svgs.forEach(svg => this._processSvg(svg)) });
let template = mustache.render( svgs.forEach(svg => this._processSvg(svg, _svgFilePath));
templateContent.toString(), let template = mustache.render(
_.extend( templateContent.toString(),
{}, _.extend(
this._options.context, {},
{ this._options.context,
svgs: this._svgs {
} svgs: this._svgs
) }
); )
_resolve(template); );
_resolve(template);
} catch (e) {
console.log(e);
}
}); });
} }
/** /**
* Processes a single SVG icon * Processes a single SVG icon
* *
* _data is expected to carry two properties: * _data is expected to carry two properties:
* data.content: A string containing the SVG source * data.content: A string containing the SVG source
* data.fileName: A string containing the file name * data.fileName: A string containing the file name
* *
* @param {Object} _data Object containing info about the SVG * @param {Object} _data Object containing info about the SVG
* @param {String} _svgFilePath Original File Path from the fetched SVG
*/ */
_processSvg(_data) { _processSvg(_data, _svgFilePath) {
const xmlString = parseXmlStringSync(_data.content.toString(), { const xmlString = parseXmlStringSync(_data.content.toString(), {
attrNameProcessors: [name => name.toLowerCase()] attrNameProcessors: [name => name.toLowerCase()]
}); });
const svgDimensions = this._getSvgDimensions(xmlString); const svgDimensions = this._getSvgDimensions(xmlString);
const _svgFilePathAdjusted = _svgFilePath.replace('**', '');
const svgData = { const svgData = {
name: path.basename(_data.fileName, '.svg'), name: _data.fileName.replace(_svgFilePathAdjusted, '').replace(/\//g, '-').replace('.svg', '').replace('fontawesome-', ''),
inline: svgToMiniDataURI(_data.content), // add fill="white" to allow later color changes based on this value
inline: svgToMiniDataURI(_data.content.indexOf('fill=') === -1 ? _data.content.replace('<svg', '<svg fill="white"') : _data.content),
width: parseInt(svgDimensions.width) + 'px', width: parseInt(svgDimensions.width) + 'px',
height: parseInt(svgDimensions.height) + 'px', height: parseInt(svgDimensions.height) + 'px',
dimensions: svgDimensions dimensions: svgDimensions
...@@ -90,9 +96,9 @@ module.exports = class InlineSvg { ...@@ -90,9 +96,9 @@ module.exports = class InlineSvg {
/** /**
* Extracts the dimensions from the SVG source * Extracts the dimensions from the SVG source
* *
* @param {String} xmlString The SVG source * @param {String} xmlString The SVG source
* @returns {Object} * @returns {Object}
*/ */
_getSvgDimensions(xmlString) { _getSvgDimensions(xmlString) {
const hasWidthHeightAttr = xmlString.svg.$['width'] && xmlString.svg.$['width']; const hasWidthHeightAttr = xmlString.svg.$['width'] && xmlString.svg.$['width'];
...@@ -113,7 +119,7 @@ module.exports = class InlineSvg { ...@@ -113,7 +119,7 @@ module.exports = class InlineSvg {
/** /**
* Reads all the SVGs that are located in _path * Reads all the SVGs that are located in _path
* *
* @param {String} _path The location to read from * @param {String} _path The location to read from
* @returns {Promise} * @returns {Promise}
*/ */
...@@ -134,11 +140,10 @@ module.exports = class InlineSvg { ...@@ -134,11 +140,10 @@ module.exports = class InlineSvg {
/** /**
* Returns the mustache template as a string * Returns the mustache template as a string
* *
* @returns {String} * @returns {String}
*/ */
_getTemplateContent() { _getTemplateContent() {
return fs.readFileSync(this._options.template); return fs.readFileSync(this._options.template);
} }
}; };
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment