Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Toolchain
inline-svg
Commits
be28cb6b
Commit
be28cb6b
authored
Aug 22, 2019
by
Stefan Galinski
🎮
Browse files
[FEATURE] Allow to work with recent fontawesome version that has subdirectories
parent
1411e9b3
Changes
1
Hide whitespace changes
Inline
Side-by-side
index.js
View file @
be28cb6b
...
@@ -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
);
}
}
};
};
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment