Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@fortawesome/fontawesome
Advanced tools
@fortawesome/fontawesome - npm Package Compare versions
Comparing version 0.0.19 to 0.0.20
115
index.es.js
| /** | ||
| * Font Awesome 5.0.0-rc3 | ||
| * Font Awesome 5.0.0-rc4 | ||
| */ | ||
@@ -32,4 +32,5 @@ | ||
| var DEFAULT_REPLACEMENT_CLASS = 'svg-inline--fa'; | ||
| var DATA_FA_REPLACEMENT = 'data-fa-replacement'; | ||
| var DATA_FA_PROCESSED = 'data-fa-processed'; | ||
| var DATA_FA_PSEUDO_ELEMENT = 'data-fa-pseudo-element'; | ||
| var HTML_CLASS_I2SVG_BASE_CLASS = 'fontawesome-i2svg'; | ||
@@ -473,3 +474,3 @@ var PRODUCTION = function () { | ||
| children: [], | ||
| attributes: _extends({}, extra.attributes, (_babelHelpers$extends = {}, defineProperty(_babelHelpers$extends, DATA_FA_REPLACEMENT, 'true'), defineProperty(_babelHelpers$extends, 'data-prefix', prefix), defineProperty(_babelHelpers$extends, 'data-icon', iconName), defineProperty(_babelHelpers$extends, 'class', attrClass), defineProperty(_babelHelpers$extends, 'role', 'img'), defineProperty(_babelHelpers$extends, 'xmlns', 'http://www.w3.org/2000/svg'), defineProperty(_babelHelpers$extends, 'viewBox', '0 0 ' + width + ' ' + height), _babelHelpers$extends)) | ||
| attributes: _extends({}, extra.attributes, (_babelHelpers$extends = {}, defineProperty(_babelHelpers$extends, DATA_FA_PROCESSED, ''), defineProperty(_babelHelpers$extends, 'data-prefix', prefix), defineProperty(_babelHelpers$extends, 'data-icon', iconName), defineProperty(_babelHelpers$extends, 'class', attrClass), defineProperty(_babelHelpers$extends, 'role', 'img'), defineProperty(_babelHelpers$extends, 'xmlns', 'http://www.w3.org/2000/svg'), defineProperty(_babelHelpers$extends, 'viewBox', '0 0 ' + width + ' ' + height), _babelHelpers$extends)) | ||
| }; | ||
@@ -514,3 +515,3 @@ | ||
| var attributes = _extends({}, extra.attributes, title ? { 'title': title } : {}, (_babelHelpers$extends2 = {}, defineProperty(_babelHelpers$extends2, DATA_FA_REPLACEMENT, 'true'), defineProperty(_babelHelpers$extends2, 'class', extra.classes.join(' ')), _babelHelpers$extends2)); | ||
| var attributes = _extends({}, extra.attributes, title ? { 'title': title } : {}, (_babelHelpers$extends2 = {}, defineProperty(_babelHelpers$extends2, DATA_FA_PROCESSED, ''), defineProperty(_babelHelpers$extends2, 'class', extra.classes.join(' ')), _babelHelpers$extends2)); | ||
@@ -545,5 +546,5 @@ var styles = _extends({}, extra.styles); | ||
| var noop$1 = function noop() {}; | ||
| var p = config.measurePerformance && PERFORMANCE && PERFORMANCE.mark && PERFORMANCE.measure ? PERFORMANCE : { mark: noop$1, measure: noop$1 }; | ||
| var preamble = 'FA "5.0.0-rc3"'; | ||
| var noop$2 = function noop() {}; | ||
| var p = config.measurePerformance && PERFORMANCE && PERFORMANCE.mark && PERFORMANCE.measure ? PERFORMANCE : { mark: noop$2, measure: noop$2 }; | ||
| var preamble = 'FA "5.0.0-rc4"'; | ||
@@ -579,2 +580,4 @@ var begin = function begin(name) { | ||
| var noop$1 = function noop() {}; | ||
| function getMutator() { | ||
@@ -602,5 +605,30 @@ if (config.autoReplaceSvg === true) { | ||
| var abstract = mutation[1]; | ||
| // If we already have a replaced node we do not want to continue nesting within it. | ||
| // Short-circuit to the standard replacement | ||
| if (~toArray(node.classList).indexOf(config.replacementClass)) { | ||
| return mutators.replace(mutation); | ||
| } | ||
| var forSvg = new RegExp(config.familyPrefix + '-.*'); | ||
| delete abstract[0].attributes.style; | ||
| var splitClasses = abstract[0].attributes.class.split(' ').reduce(function (acc, cls) { | ||
| if (cls === config.replacementClass || cls.match(forSvg)) { | ||
| acc.toSvg.push(cls); | ||
| } else { | ||
| acc.toNode.push(cls); | ||
| } | ||
| return acc; | ||
| }, { toNode: [], toSvg: [] }); | ||
| abstract[0].attributes.class = splitClasses.toSvg.join(' '); | ||
| var newInnerHTML = abstract.map(function (a) { | ||
| return toHtml(a); | ||
| }).join('\n'); | ||
| node.setAttribute('class', splitClasses.toNode.join(' ')); | ||
| node.setAttribute(DATA_FA_PROCESSED, ''); | ||
| node.innerHTML = newInnerHTML; | ||
@@ -611,16 +639,22 @@ } | ||
| function perform(mutations, callback) { | ||
| if (!WINDOW.requestAnimationFrame) return; | ||
| var callbackFunction = typeof callback === 'function' ? callback : noop$1; | ||
| WINDOW.requestAnimationFrame(function () { | ||
| var mutator = getMutator(); | ||
| var end = perf.begin('mutate'); | ||
| if (mutations.length === 0) { | ||
| callbackFunction(); | ||
| } else { | ||
| var frame = WINDOW.requestAnimationFrame || function (op) { | ||
| return op(); | ||
| }; | ||
| mutations.map(mutator); | ||
| frame(function () { | ||
| var mutator = getMutator(); | ||
| var mark = perf.begin('mutate'); | ||
| if (typeof callback === 'function') { | ||
| callback(); | ||
| } | ||
| mutations.map(mutator); | ||
| end(); | ||
| }); | ||
| mark(); | ||
| callbackFunction(); | ||
| }); | ||
| } | ||
| } | ||
@@ -1134,10 +1168,15 @@ | ||
| var children = toArray(node.children); | ||
| var child = pos === ':before' ? children[0] : children.slice(-1)[0]; | ||
| var hasReplacement = child ? !!child.getAttribute(DATA_FA_PSEUDO_ELEMENT) : false; | ||
| var pseudoElement = children.filter(function (c) { | ||
| return c.getAttribute(DATA_FA_PSEUDO_ELEMENT) === pos; | ||
| })[0]; | ||
| if (fontFamily && !hasReplacement) { | ||
| if (!fontFamily && pseudoElement) { | ||
| pseudoElement.remove(); | ||
| } | ||
| if (fontFamily && !pseudoElement) { | ||
| var content = styles.getPropertyValue('content'); | ||
| var i = DOCUMENT.createElement('i'); | ||
| i.setAttribute('class', '' + STYLE_TO_PREFIX[fontFamily[1]]); | ||
| i.setAttribute(DATA_FA_PSEUDO_ELEMENT, true); | ||
| i.setAttribute(DATA_FA_PSEUDO_ELEMENT, pos); | ||
| i.innerText = content.length === 3 ? content.substr(1, 1) : content; | ||
@@ -1162,16 +1201,12 @@ if (pos === ':before') { | ||
| var hclAdd = function hclAdd(suffix) { | ||
| return htmlClassList.add('font-awesome-i2svg-' + suffix); | ||
| return htmlClassList.add(HTML_CLASS_I2SVG_BASE_CLASS + '-' + suffix); | ||
| }; | ||
| var hclRemove = function hclRemove(suffix) { | ||
| return htmlClassList.remove('font-awesome-i2svg-' + suffix); | ||
| return htmlClassList.remove(HTML_CLASS_I2SVG_BASE_CLASS + '-' + suffix); | ||
| }; | ||
| var prefixes = Object.keys(packs); | ||
| var prefixesDomQuery = ['.' + LAYERS_TEXT_CLASSNAME].concat(prefixes.map(function (p) { | ||
| return '.' + p; | ||
| var prefixesDomQuery = ['.' + LAYERS_TEXT_CLASSNAME + ':not([' + DATA_FA_PROCESSED + '])'].concat(prefixes.map(function (p) { | ||
| return '.' + p + ':not([' + DATA_FA_PROCESSED + '])'; | ||
| })).join(', '); | ||
| hclAdd('active'); | ||
| hclAdd('pending'); | ||
| hclRemove('complete'); | ||
| if (prefixesDomQuery.length === 0) { | ||
@@ -1181,11 +1216,14 @@ return; | ||
| if (config.searchPseudoElements) { | ||
| searchPseudoElements(root); | ||
| var candidates = toArray(root.querySelectorAll(prefixesDomQuery)); | ||
| if (candidates.length > 0) { | ||
| hclAdd('pending'); | ||
| hclRemove('complete'); | ||
| } else { | ||
| return; | ||
| } | ||
| var end = perf.begin('onTree'); | ||
| var mark = perf.begin('onTree'); | ||
| var mutations = toArray(root.querySelectorAll(prefixesDomQuery)).reduce(function (acc, node) { | ||
| if (node.getAttribute(DATA_FA_REPLACEMENT)) return acc; | ||
| var mutations = candidates.reduce(function (acc, node) { | ||
| try { | ||
@@ -1208,5 +1246,6 @@ var mutation = generateMutation(node); | ||
| end(); | ||
| mark(); | ||
| perform(mutations, function () { | ||
| hclAdd('active'); | ||
| hclAdd('complete'); | ||
@@ -1367,2 +1406,6 @@ hclRemove('pending'); | ||
| if (config.searchPseudoElements) { | ||
| searchPseudoElements(node); | ||
| } | ||
| onTree(node, callback); | ||
@@ -1369,0 +1412,0 @@ }, |
115
index.js
| /** | ||
| * Font Awesome 5.0.0-rc3 | ||
| * Font Awesome 5.0.0-rc4 | ||
| */ | ||
@@ -38,4 +38,5 @@ | ||
| var DEFAULT_REPLACEMENT_CLASS = 'svg-inline--fa'; | ||
| var DATA_FA_REPLACEMENT = 'data-fa-replacement'; | ||
| var DATA_FA_PROCESSED = 'data-fa-processed'; | ||
| var DATA_FA_PSEUDO_ELEMENT = 'data-fa-pseudo-element'; | ||
| var HTML_CLASS_I2SVG_BASE_CLASS = 'fontawesome-i2svg'; | ||
@@ -479,3 +480,3 @@ var PRODUCTION = function () { | ||
| children: [], | ||
| attributes: _extends({}, extra.attributes, (_babelHelpers$extends = {}, defineProperty(_babelHelpers$extends, DATA_FA_REPLACEMENT, 'true'), defineProperty(_babelHelpers$extends, 'data-prefix', prefix), defineProperty(_babelHelpers$extends, 'data-icon', iconName), defineProperty(_babelHelpers$extends, 'class', attrClass), defineProperty(_babelHelpers$extends, 'role', 'img'), defineProperty(_babelHelpers$extends, 'xmlns', 'http://www.w3.org/2000/svg'), defineProperty(_babelHelpers$extends, 'viewBox', '0 0 ' + width + ' ' + height), _babelHelpers$extends)) | ||
| attributes: _extends({}, extra.attributes, (_babelHelpers$extends = {}, defineProperty(_babelHelpers$extends, DATA_FA_PROCESSED, ''), defineProperty(_babelHelpers$extends, 'data-prefix', prefix), defineProperty(_babelHelpers$extends, 'data-icon', iconName), defineProperty(_babelHelpers$extends, 'class', attrClass), defineProperty(_babelHelpers$extends, 'role', 'img'), defineProperty(_babelHelpers$extends, 'xmlns', 'http://www.w3.org/2000/svg'), defineProperty(_babelHelpers$extends, 'viewBox', '0 0 ' + width + ' ' + height), _babelHelpers$extends)) | ||
| }; | ||
@@ -520,3 +521,3 @@ | ||
| var attributes = _extends({}, extra.attributes, title ? { 'title': title } : {}, (_babelHelpers$extends2 = {}, defineProperty(_babelHelpers$extends2, DATA_FA_REPLACEMENT, 'true'), defineProperty(_babelHelpers$extends2, 'class', extra.classes.join(' ')), _babelHelpers$extends2)); | ||
| var attributes = _extends({}, extra.attributes, title ? { 'title': title } : {}, (_babelHelpers$extends2 = {}, defineProperty(_babelHelpers$extends2, DATA_FA_PROCESSED, ''), defineProperty(_babelHelpers$extends2, 'class', extra.classes.join(' ')), _babelHelpers$extends2)); | ||
@@ -551,5 +552,5 @@ var styles = _extends({}, extra.styles); | ||
| var noop$1 = function noop() {}; | ||
| var p = config.measurePerformance && PERFORMANCE && PERFORMANCE.mark && PERFORMANCE.measure ? PERFORMANCE : { mark: noop$1, measure: noop$1 }; | ||
| var preamble = 'FA "5.0.0-rc3"'; | ||
| var noop$2 = function noop() {}; | ||
| var p = config.measurePerformance && PERFORMANCE && PERFORMANCE.mark && PERFORMANCE.measure ? PERFORMANCE : { mark: noop$2, measure: noop$2 }; | ||
| var preamble = 'FA "5.0.0-rc4"'; | ||
@@ -585,2 +586,4 @@ var begin = function begin(name) { | ||
| var noop$1 = function noop() {}; | ||
| function getMutator() { | ||
@@ -608,5 +611,30 @@ if (config.autoReplaceSvg === true) { | ||
| var abstract = mutation[1]; | ||
| // If we already have a replaced node we do not want to continue nesting within it. | ||
| // Short-circuit to the standard replacement | ||
| if (~toArray(node.classList).indexOf(config.replacementClass)) { | ||
| return mutators.replace(mutation); | ||
| } | ||
| var forSvg = new RegExp(config.familyPrefix + '-.*'); | ||
| delete abstract[0].attributes.style; | ||
| var splitClasses = abstract[0].attributes.class.split(' ').reduce(function (acc, cls) { | ||
| if (cls === config.replacementClass || cls.match(forSvg)) { | ||
| acc.toSvg.push(cls); | ||
| } else { | ||
| acc.toNode.push(cls); | ||
| } | ||
| return acc; | ||
| }, { toNode: [], toSvg: [] }); | ||
| abstract[0].attributes.class = splitClasses.toSvg.join(' '); | ||
| var newInnerHTML = abstract.map(function (a) { | ||
| return toHtml(a); | ||
| }).join('\n'); | ||
| node.setAttribute('class', splitClasses.toNode.join(' ')); | ||
| node.setAttribute(DATA_FA_PROCESSED, ''); | ||
| node.innerHTML = newInnerHTML; | ||
@@ -617,16 +645,22 @@ } | ||
| function perform(mutations, callback) { | ||
| if (!WINDOW.requestAnimationFrame) return; | ||
| var callbackFunction = typeof callback === 'function' ? callback : noop$1; | ||
| WINDOW.requestAnimationFrame(function () { | ||
| var mutator = getMutator(); | ||
| var end = perf.begin('mutate'); | ||
| if (mutations.length === 0) { | ||
| callbackFunction(); | ||
| } else { | ||
| var frame = WINDOW.requestAnimationFrame || function (op) { | ||
| return op(); | ||
| }; | ||
| mutations.map(mutator); | ||
| frame(function () { | ||
| var mutator = getMutator(); | ||
| var mark = perf.begin('mutate'); | ||
| if (typeof callback === 'function') { | ||
| callback(); | ||
| } | ||
| mutations.map(mutator); | ||
| end(); | ||
| }); | ||
| mark(); | ||
| callbackFunction(); | ||
| }); | ||
| } | ||
| } | ||
@@ -1140,10 +1174,15 @@ | ||
| var children = toArray(node.children); | ||
| var child = pos === ':before' ? children[0] : children.slice(-1)[0]; | ||
| var hasReplacement = child ? !!child.getAttribute(DATA_FA_PSEUDO_ELEMENT) : false; | ||
| var pseudoElement = children.filter(function (c) { | ||
| return c.getAttribute(DATA_FA_PSEUDO_ELEMENT) === pos; | ||
| })[0]; | ||
| if (fontFamily && !hasReplacement) { | ||
| if (!fontFamily && pseudoElement) { | ||
| pseudoElement.remove(); | ||
| } | ||
| if (fontFamily && !pseudoElement) { | ||
| var content = styles.getPropertyValue('content'); | ||
| var i = DOCUMENT.createElement('i'); | ||
| i.setAttribute('class', '' + STYLE_TO_PREFIX[fontFamily[1]]); | ||
| i.setAttribute(DATA_FA_PSEUDO_ELEMENT, true); | ||
| i.setAttribute(DATA_FA_PSEUDO_ELEMENT, pos); | ||
| i.innerText = content.length === 3 ? content.substr(1, 1) : content; | ||
@@ -1168,16 +1207,12 @@ if (pos === ':before') { | ||
| var hclAdd = function hclAdd(suffix) { | ||
| return htmlClassList.add('font-awesome-i2svg-' + suffix); | ||
| return htmlClassList.add(HTML_CLASS_I2SVG_BASE_CLASS + '-' + suffix); | ||
| }; | ||
| var hclRemove = function hclRemove(suffix) { | ||
| return htmlClassList.remove('font-awesome-i2svg-' + suffix); | ||
| return htmlClassList.remove(HTML_CLASS_I2SVG_BASE_CLASS + '-' + suffix); | ||
| }; | ||
| var prefixes = Object.keys(packs); | ||
| var prefixesDomQuery = ['.' + LAYERS_TEXT_CLASSNAME].concat(prefixes.map(function (p) { | ||
| return '.' + p; | ||
| var prefixesDomQuery = ['.' + LAYERS_TEXT_CLASSNAME + ':not([' + DATA_FA_PROCESSED + '])'].concat(prefixes.map(function (p) { | ||
| return '.' + p + ':not([' + DATA_FA_PROCESSED + '])'; | ||
| })).join(', '); | ||
| hclAdd('active'); | ||
| hclAdd('pending'); | ||
| hclRemove('complete'); | ||
| if (prefixesDomQuery.length === 0) { | ||
@@ -1187,11 +1222,14 @@ return; | ||
| if (config.searchPseudoElements) { | ||
| searchPseudoElements(root); | ||
| var candidates = toArray(root.querySelectorAll(prefixesDomQuery)); | ||
| if (candidates.length > 0) { | ||
| hclAdd('pending'); | ||
| hclRemove('complete'); | ||
| } else { | ||
| return; | ||
| } | ||
| var end = perf.begin('onTree'); | ||
| var mark = perf.begin('onTree'); | ||
| var mutations = toArray(root.querySelectorAll(prefixesDomQuery)).reduce(function (acc, node) { | ||
| if (node.getAttribute(DATA_FA_REPLACEMENT)) return acc; | ||
| var mutations = candidates.reduce(function (acc, node) { | ||
| try { | ||
@@ -1214,5 +1252,6 @@ var mutation = generateMutation(node); | ||
| end(); | ||
| mark(); | ||
| perform(mutations, function () { | ||
| hclAdd('active'); | ||
| hclAdd('complete'); | ||
@@ -1373,2 +1412,6 @@ hclRemove('pending'); | ||
| if (config.searchPseudoElements) { | ||
| searchPseudoElements(node); | ||
| } | ||
| onTree(node, callback); | ||
@@ -1375,0 +1418,0 @@ }, |
@@ -7,4 +7,4 @@ { | ||
| "license": "MIT", | ||
| "version": "0.0.19", | ||
| "version": "0.0.20", | ||
| "name": "@fortawesome/fontawesome" | ||
| } |
@@ -51,2 +51,18 @@ <h1 align="center"><img src="https://img.fortawesome.com/349cfdf6/gh-logo.svg" alt="Font Awesome 5" width="50%"></h1> | ||
| ## Alternative imports | ||
| Using `import { faAddressBook } from '@fortawesome/fontawesome-free-solid'` is great if you are using Webpack 2+ or Rollup which supports tree-shaking. | ||
| However if you cannot use this feature you can do the following to achieve the same result: | ||
| ```javascript | ||
| import faUser from '@fortawesome/fontawesome-free-solid/faUser' | ||
| ``` | ||
| Or using `require`: | ||
| ```javascript | ||
| var faUser = require('@fortawesome/fontawesome-free-solid/faUser') | ||
| ``` | ||
| ## Configuration | ||
@@ -519,1 +535,13 @@ | ||
| This can result in significantly reduce the bundle size. | ||
| If you can't use tree-shaking an alternative is to import the icons like this: | ||
| ```javascript | ||
| import faUser from '@fortawesome/fontawesome-free-solid/faUser' | ||
| ``` | ||
| Or using `require`: | ||
| ```javascript | ||
| var faUser = require('@fortawesome/fontawesome-free-solid/faUser') | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.93%
113474
- Lines of code
- increased by2.66%
2550
- Number of lines in readme file
- increased by5.41%
546
No dependency changes