Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-inlinesvg
Advanced tools
react-inlinesvg - npm Package Compare versions
Comparing version 3.0.0 to 3.0.1
@@ -7,2 +7,3 @@ import * as React from 'react'; | ||
| export default class InlineSVG extends React.PureComponent<Props, State> { | ||
| private isInitialized; | ||
| private isActive; | ||
@@ -9,0 +10,0 @@ private readonly hash; |
543
esm/index.js
@@ -60,79 +60,111 @@ var __extends = (this && this.__extends) || (function () { | ||
| var _this = _super.call(this, props) || this; | ||
| _this.isActive = false; | ||
| _this.handleLoad = function (content) { | ||
| /* istanbul ignore else */ | ||
| if (_this.isActive) { | ||
| _this.setState({ | ||
| content: content, | ||
| status: STATUS.LOADED, | ||
| }, _this.getElement); | ||
| Object.defineProperty(_this, "isInitialized", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| Object.defineProperty(_this, "isActive", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| Object.defineProperty(_this, "hash", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| Object.defineProperty(_this, "handleLoad", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (content) { | ||
| /* istanbul ignore else */ | ||
| if (_this.isActive) { | ||
| _this.setState({ | ||
| content: content, | ||
| status: STATUS.LOADED, | ||
| }, _this.getElement); | ||
| } | ||
| } | ||
| }; | ||
| _this.handleError = function (error) { | ||
| var onError = _this.props.onError; | ||
| var status = error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED; | ||
| /* istanbul ignore else */ | ||
| if (_this.isActive) { | ||
| _this.setState({ status: status }, function () { | ||
| /* istanbul ignore else */ | ||
| if (typeof onError === 'function') { | ||
| onError(error); | ||
| } | ||
| }); | ||
| }); | ||
| Object.defineProperty(_this, "handleError", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (error) { | ||
| var onError = _this.props.onError; | ||
| var status = error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED; | ||
| /* istanbul ignore else */ | ||
| if (_this.isActive) { | ||
| _this.setState({ status: status }, function () { | ||
| /* istanbul ignore else */ | ||
| if (typeof onError === 'function') { | ||
| onError(error); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| _this.request = function () { | ||
| var _a = _this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src; | ||
| try { | ||
| if (cacheRequests) { | ||
| cacheStore[src] = { content: '', status: STATUS.LOADING }; | ||
| } | ||
| return fetch(src, fetchOptions) | ||
| .then(function (response) { | ||
| var contentType = response.headers.get('content-type'); | ||
| var _a = __read((contentType || '').split(/ ?; ?/), 1), fileType = _a[0]; | ||
| if (response.status > 299) { | ||
| throw new Error('Not found'); | ||
| }); | ||
| Object.defineProperty(_this, "request", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _a = _this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src; | ||
| try { | ||
| if (cacheRequests) { | ||
| cacheStore[src] = { content: '', status: STATUS.LOADING }; | ||
| } | ||
| if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.includes(d); })) { | ||
| throw new Error("Content type isn't valid: ".concat(fileType)); | ||
| } | ||
| return response.text(); | ||
| }) | ||
| .then(function (content) { | ||
| var currentSrc = _this.props.src; | ||
| // the current src don't match the previous one, skipping... | ||
| if (src !== currentSrc) { | ||
| if (cacheStore[src].status === STATUS.LOADING) { | ||
| delete cacheStore[src]; | ||
| return fetch(src, fetchOptions) | ||
| .then(function (response) { | ||
| var contentType = response.headers.get('content-type'); | ||
| var _a = __read((contentType || '').split(/ ?; ?/), 1), fileType = _a[0]; | ||
| if (response.status > 299) { | ||
| throw new Error('Not found'); | ||
| } | ||
| return; | ||
| } | ||
| _this.handleLoad(content); | ||
| /* istanbul ignore else */ | ||
| if (cacheRequests) { | ||
| var cache = cacheStore[src]; | ||
| if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.includes(d); })) { | ||
| throw new Error("Content type isn't valid: ".concat(fileType)); | ||
| } | ||
| return response.text(); | ||
| }) | ||
| .then(function (content) { | ||
| var currentSrc = _this.props.src; | ||
| // the current src don't match the previous one, skipping... | ||
| if (src !== currentSrc) { | ||
| if (cacheStore[src].status === STATUS.LOADING) { | ||
| delete cacheStore[src]; | ||
| } | ||
| return; | ||
| } | ||
| _this.handleLoad(content); | ||
| /* istanbul ignore else */ | ||
| if (cache) { | ||
| cache.content = content; | ||
| cache.status = STATUS.LOADED; | ||
| if (cacheRequests) { | ||
| var cache = cacheStore[src]; | ||
| /* istanbul ignore else */ | ||
| if (cache) { | ||
| cache.content = content; | ||
| cache.status = STATUS.LOADED; | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| .catch(function (error) { | ||
| _this.handleError(error); | ||
| /* istanbul ignore else */ | ||
| if (cacheRequests) { | ||
| var cache = cacheStore[src]; | ||
| }) | ||
| .catch(function (error) { | ||
| _this.handleError(error); | ||
| /* istanbul ignore else */ | ||
| if (cache) { | ||
| delete cacheStore[src]; | ||
| if (cacheRequests) { | ||
| var cache = cacheStore[src]; | ||
| /* istanbul ignore else */ | ||
| if (cache) { | ||
| delete cacheStore[src]; | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| catch (error) { | ||
| return _this.handleError(new Error(error.message)); | ||
| } | ||
| } | ||
| catch (error) { | ||
| return _this.handleError(new Error(error.message)); | ||
| } | ||
| }; | ||
| }); | ||
| _this.state = { | ||
@@ -147,19 +179,53 @@ content: '', | ||
| } | ||
| InlineSVG.prototype.componentDidMount = function () { | ||
| this.isActive = true; | ||
| if (!canUseDOM()) { | ||
| return; | ||
| Object.defineProperty(InlineSVG.prototype, "componentDidMount", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| this.isActive = true; | ||
| if (!canUseDOM() || this.isInitialized) { | ||
| return; | ||
| } | ||
| var status = this.state.status; | ||
| var src = this.props.src; | ||
| try { | ||
| /* istanbul ignore else */ | ||
| if (status === STATUS.PENDING) { | ||
| /* istanbul ignore else */ | ||
| if (!isSupportedEnvironment()) { | ||
| throw new Error('Browser does not support SVG'); | ||
| } | ||
| /* istanbul ignore else */ | ||
| if (!src) { | ||
| throw new Error('Missing src'); | ||
| } | ||
| this.load(); | ||
| } | ||
| } | ||
| catch (error) { | ||
| this.handleError(error); | ||
| } | ||
| this.isInitialized = true; | ||
| } | ||
| var status = this.state.status; | ||
| var src = this.props.src; | ||
| try { | ||
| /* istanbul ignore else */ | ||
| if (status === STATUS.PENDING) { | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "componentDidUpdate", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (previousProps, previousState) { | ||
| if (!canUseDOM()) { | ||
| return; | ||
| } | ||
| var _a = this.state, hasCache = _a.hasCache, status = _a.status; | ||
| var _b = this.props, onLoad = _b.onLoad, src = _b.src; | ||
| if (previousState.status !== STATUS.READY && status === STATUS.READY) { | ||
| /* istanbul ignore else */ | ||
| if (!isSupportedEnvironment()) { | ||
| throw new Error('Browser does not support SVG'); | ||
| if (onLoad) { | ||
| onLoad(src, hasCache); | ||
| } | ||
| /* istanbul ignore else */ | ||
| } | ||
| if (previousProps.src !== src) { | ||
| if (!src) { | ||
| throw new Error('Missing src'); | ||
| this.handleError(new Error('Missing src')); | ||
| return; | ||
| } | ||
@@ -169,171 +235,188 @@ this.load(); | ||
| } | ||
| catch (error) { | ||
| this.handleError(error); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "componentWillUnmount", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| this.isActive = false; | ||
| } | ||
| }; | ||
| InlineSVG.prototype.componentDidUpdate = function (previousProps, previousState) { | ||
| if (!canUseDOM()) { | ||
| return; | ||
| } | ||
| var _a = this.state, hasCache = _a.hasCache, status = _a.status; | ||
| var _b = this.props, onLoad = _b.onLoad, src = _b.src; | ||
| if (previousState.status !== STATUS.READY && status === STATUS.READY) { | ||
| /* istanbul ignore else */ | ||
| if (onLoad) { | ||
| onLoad(src, hasCache); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "getNode", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _a = this.props, description = _a.description, title = _a.title; | ||
| try { | ||
| var svgText = this.processSVG(); | ||
| var node = convert(svgText, { nodeOnly: true }); | ||
| if (!node || !(node instanceof SVGSVGElement)) { | ||
| throw new Error('Could not convert the src to a DOM Node'); | ||
| } | ||
| var svg = this.updateSVGAttributes(node); | ||
| if (description) { | ||
| var originalDesc = svg.querySelector('desc'); | ||
| if (originalDesc && originalDesc.parentNode) { | ||
| originalDesc.parentNode.removeChild(originalDesc); | ||
| } | ||
| var descElement = document.createElement('desc'); | ||
| descElement.innerHTML = description; | ||
| svg.prepend(descElement); | ||
| } | ||
| if (title) { | ||
| var originalTitle = svg.querySelector('title'); | ||
| if (originalTitle && originalTitle.parentNode) { | ||
| originalTitle.parentNode.removeChild(originalTitle); | ||
| } | ||
| var titleElement = document.createElement('title'); | ||
| titleElement.innerHTML = title; | ||
| svg.prepend(titleElement); | ||
| } | ||
| return svg; | ||
| } | ||
| } | ||
| if (previousProps.src !== src) { | ||
| if (!src) { | ||
| this.handleError(new Error('Missing src')); | ||
| return; | ||
| catch (error) { | ||
| return this.handleError(error); | ||
| } | ||
| this.load(); | ||
| } | ||
| }; | ||
| InlineSVG.prototype.componentWillUnmount = function () { | ||
| this.isActive = false; | ||
| }; | ||
| InlineSVG.prototype.getNode = function () { | ||
| var _a = this.props, description = _a.description, title = _a.title; | ||
| try { | ||
| var svgText = this.processSVG(); | ||
| var node = convert(svgText, { nodeOnly: true }); | ||
| if (!node || !(node instanceof SVGSVGElement)) { | ||
| throw new Error('Could not convert the src to a DOM Node'); | ||
| } | ||
| var svg = this.updateSVGAttributes(node); | ||
| if (description) { | ||
| var originalDesc = svg.querySelector('desc'); | ||
| if (originalDesc && originalDesc.parentNode) { | ||
| originalDesc.parentNode.removeChild(originalDesc); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "getElement", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| try { | ||
| var node = this.getNode(); | ||
| var element = convert(node); | ||
| if (!element || !React.isValidElement(element)) { | ||
| throw new Error('Could not convert the src to a React element'); | ||
| } | ||
| var descElement = document.createElement('desc'); | ||
| descElement.innerHTML = description; | ||
| svg.prepend(descElement); | ||
| this.setState({ | ||
| element: element, | ||
| status: STATUS.READY, | ||
| }); | ||
| } | ||
| if (title) { | ||
| var originalTitle = svg.querySelector('title'); | ||
| if (originalTitle && originalTitle.parentNode) { | ||
| originalTitle.parentNode.removeChild(originalTitle); | ||
| } | ||
| var titleElement = document.createElement('title'); | ||
| titleElement.innerHTML = title; | ||
| svg.prepend(titleElement); | ||
| catch (error) { | ||
| this.handleError(new Error(error.message)); | ||
| } | ||
| return svg; | ||
| } | ||
| catch (error) { | ||
| return this.handleError(error); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "load", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _this = this; | ||
| /* istanbul ignore else */ | ||
| if (this.isActive) { | ||
| this.setState({ | ||
| content: '', | ||
| element: null, | ||
| status: STATUS.LOADING, | ||
| }, function () { | ||
| var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src; | ||
| var cache = cacheRequests && cacheStore[src]; | ||
| if (cache && cache.status === STATUS.LOADED) { | ||
| _this.handleLoad(cache.content); | ||
| return; | ||
| } | ||
| var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/); | ||
| var inlineSrc; | ||
| if (dataURI) { | ||
| inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]); | ||
| } | ||
| else if (src.includes('<svg')) { | ||
| inlineSrc = src; | ||
| } | ||
| if (inlineSrc) { | ||
| _this.handleLoad(inlineSrc); | ||
| return; | ||
| } | ||
| _this.request(); | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| InlineSVG.prototype.getElement = function () { | ||
| try { | ||
| var node = this.getNode(); | ||
| var element = convert(node); | ||
| if (!element || !React.isValidElement(element)) { | ||
| throw new Error('Could not convert the src to a React element'); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "updateSVGAttributes", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (node) { | ||
| var _this = this; | ||
| var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs; | ||
| var replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole']; | ||
| var linkAttributes = ['href', 'xlink:href']; | ||
| var isDataValue = function (name, value) { | ||
| return linkAttributes.includes(name) && (value ? !value.includes('#') : false); | ||
| }; | ||
| if (!uniquifyIDs) { | ||
| return node; | ||
| } | ||
| this.setState({ | ||
| element: element, | ||
| status: STATUS.READY, | ||
| }); | ||
| } | ||
| catch (error) { | ||
| this.handleError(new Error(error.message)); | ||
| } | ||
| }; | ||
| InlineSVG.prototype.load = function () { | ||
| var _this = this; | ||
| /* istanbul ignore else */ | ||
| if (this.isActive) { | ||
| this.setState({ | ||
| content: '', | ||
| element: null, | ||
| status: STATUS.LOADING, | ||
| }, function () { | ||
| var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src; | ||
| var cache = cacheRequests && cacheStore[src]; | ||
| if (cache && cache.status === STATUS.LOADED) { | ||
| _this.handleLoad(cache.content); | ||
| return; | ||
| __spreadArray([], __read(node.children), false).map(function (d) { | ||
| if (d.attributes && d.attributes.length) { | ||
| var attributes_1 = Object.values(d.attributes).map(function (a) { | ||
| var attribute = a; | ||
| var match = a.value.match(/url\((.*?)\)/); | ||
| if (match && match[1]) { | ||
| attribute.value = a.value.replace(match[0], "url(".concat(baseURL).concat(match[1], "__").concat(_this.hash, ")")); | ||
| } | ||
| return attribute; | ||
| }); | ||
| replaceableAttributes.forEach(function (r) { | ||
| var attribute = attributes_1.find(function (a) { return a.name === r; }); | ||
| if (attribute && !isDataValue(r, attribute.value)) { | ||
| attribute.value = "".concat(attribute.value, "__").concat(_this.hash); | ||
| } | ||
| }); | ||
| } | ||
| var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/); | ||
| var inlineSrc; | ||
| if (dataURI) { | ||
| inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]); | ||
| if (d.children.length) { | ||
| return _this.updateSVGAttributes(d); | ||
| } | ||
| else if (src.includes('<svg')) { | ||
| inlineSrc = src; | ||
| } | ||
| if (inlineSrc) { | ||
| _this.handleLoad(inlineSrc); | ||
| return; | ||
| } | ||
| _this.request(); | ||
| return d; | ||
| }); | ||
| } | ||
| }; | ||
| InlineSVG.prototype.updateSVGAttributes = function (node) { | ||
| var _this = this; | ||
| var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs; | ||
| var replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole']; | ||
| var linkAttributes = ['href', 'xlink:href']; | ||
| var isDataValue = function (name, value) { | ||
| return linkAttributes.includes(name) && (value ? !value.includes('#') : false); | ||
| }; | ||
| if (!uniquifyIDs) { | ||
| return node; | ||
| } | ||
| __spreadArray([], __read(node.children), false).map(function (d) { | ||
| if (d.attributes && d.attributes.length) { | ||
| var attributes_1 = Object.values(d.attributes).map(function (a) { | ||
| var attribute = a; | ||
| var match = a.value.match(/url\((.*?)\)/); | ||
| if (match && match[1]) { | ||
| attribute.value = a.value.replace(match[0], "url(".concat(baseURL).concat(match[1], "__").concat(_this.hash, ")")); | ||
| } | ||
| return attribute; | ||
| }); | ||
| replaceableAttributes.forEach(function (r) { | ||
| var attribute = attributes_1.find(function (a) { return a.name === r; }); | ||
| if (attribute && !isDataValue(r, attribute.value)) { | ||
| attribute.value = "".concat(attribute.value, "__").concat(_this.hash); | ||
| } | ||
| }); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "processSVG", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var content = this.state.content; | ||
| var preProcessor = this.props.preProcessor; | ||
| if (preProcessor) { | ||
| return preProcessor(content); | ||
| } | ||
| if (d.children.length) { | ||
| return _this.updateSVGAttributes(d); | ||
| return content; | ||
| } | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "render", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _a = this.state, element = _a.element, status = _a.status; | ||
| var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d; | ||
| var elementProps = omit(this.props, 'baseURL', 'cacheRequests', 'children', 'description', 'fetchOptions', 'innerRef', 'loader', 'onError', 'onLoad', 'preProcessor', 'src', 'title', 'uniqueHash', 'uniquifyIDs'); | ||
| if (!canUseDOM()) { | ||
| return loader; | ||
| } | ||
| return d; | ||
| }); | ||
| return node; | ||
| }; | ||
| InlineSVG.prototype.processSVG = function () { | ||
| var content = this.state.content; | ||
| var preProcessor = this.props.preProcessor; | ||
| if (preProcessor) { | ||
| return preProcessor(content); | ||
| } | ||
| return content; | ||
| }; | ||
| InlineSVG.prototype.render = function () { | ||
| var _a = this.state, element = _a.element, status = _a.status; | ||
| var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d; | ||
| var elementProps = omit(this.props, 'baseURL', 'cacheRequests', 'children', 'description', 'fetchOptions', 'innerRef', 'loader', 'onError', 'onLoad', 'preProcessor', 'src', 'title', 'uniqueHash', 'uniquifyIDs'); | ||
| if (!canUseDOM()) { | ||
| if (element) { | ||
| return React.cloneElement(element, __assign({ ref: innerRef }, elementProps)); | ||
| } | ||
| if ([STATUS.UNSUPPORTED, STATUS.FAILED].includes(status)) { | ||
| return children; | ||
| } | ||
| return loader; | ||
| } | ||
| if (element) { | ||
| return React.cloneElement(element, __assign({ ref: innerRef }, elementProps)); | ||
| }); | ||
| Object.defineProperty(InlineSVG, "defaultProps", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: { | ||
| cacheRequests: true, | ||
| uniquifyIDs: false, | ||
| } | ||
| if ([STATUS.UNSUPPORTED, STATUS.FAILED].includes(status)) { | ||
| return children; | ||
| } | ||
| return loader; | ||
| }; | ||
| InlineSVG.defaultProps = { | ||
| cacheRequests: true, | ||
| uniquifyIDs: false, | ||
| }; | ||
| }); | ||
| return InlineSVG; | ||
@@ -340,0 +423,0 @@ }(React.PureComponent)); |
@@ -7,2 +7,3 @@ import * as React from 'react'; | ||
| export default class InlineSVG extends React.PureComponent<Props, State> { | ||
| private isInitialized; | ||
| private isActive; | ||
@@ -9,0 +10,0 @@ private readonly hash; |
543
lib/index.js
@@ -77,79 +77,111 @@ "use strict"; | ||
| var _this = _super.call(this, props) || this; | ||
| _this.isActive = false; | ||
| _this.handleLoad = function (content) { | ||
| /* istanbul ignore else */ | ||
| if (_this.isActive) { | ||
| _this.setState({ | ||
| content: content, | ||
| status: helpers_1.STATUS.LOADED, | ||
| }, _this.getElement); | ||
| Object.defineProperty(_this, "isInitialized", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| Object.defineProperty(_this, "isActive", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: false | ||
| }); | ||
| Object.defineProperty(_this, "hash", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: void 0 | ||
| }); | ||
| Object.defineProperty(_this, "handleLoad", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (content) { | ||
| /* istanbul ignore else */ | ||
| if (_this.isActive) { | ||
| _this.setState({ | ||
| content: content, | ||
| status: helpers_1.STATUS.LOADED, | ||
| }, _this.getElement); | ||
| } | ||
| } | ||
| }; | ||
| _this.handleError = function (error) { | ||
| var onError = _this.props.onError; | ||
| var status = error.message === 'Browser does not support SVG' ? helpers_1.STATUS.UNSUPPORTED : helpers_1.STATUS.FAILED; | ||
| /* istanbul ignore else */ | ||
| if (_this.isActive) { | ||
| _this.setState({ status: status }, function () { | ||
| /* istanbul ignore else */ | ||
| if (typeof onError === 'function') { | ||
| onError(error); | ||
| } | ||
| }); | ||
| }); | ||
| Object.defineProperty(_this, "handleError", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (error) { | ||
| var onError = _this.props.onError; | ||
| var status = error.message === 'Browser does not support SVG' ? helpers_1.STATUS.UNSUPPORTED : helpers_1.STATUS.FAILED; | ||
| /* istanbul ignore else */ | ||
| if (_this.isActive) { | ||
| _this.setState({ status: status }, function () { | ||
| /* istanbul ignore else */ | ||
| if (typeof onError === 'function') { | ||
| onError(error); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| _this.request = function () { | ||
| var _a = _this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src; | ||
| try { | ||
| if (cacheRequests) { | ||
| exports.cacheStore[src] = { content: '', status: helpers_1.STATUS.LOADING }; | ||
| } | ||
| return fetch(src, fetchOptions) | ||
| .then(function (response) { | ||
| var contentType = response.headers.get('content-type'); | ||
| var _a = __read((contentType || '').split(/ ?; ?/), 1), fileType = _a[0]; | ||
| if (response.status > 299) { | ||
| throw new Error('Not found'); | ||
| }); | ||
| Object.defineProperty(_this, "request", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _a = _this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src; | ||
| try { | ||
| if (cacheRequests) { | ||
| exports.cacheStore[src] = { content: '', status: helpers_1.STATUS.LOADING }; | ||
| } | ||
| if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.includes(d); })) { | ||
| throw new Error("Content type isn't valid: ".concat(fileType)); | ||
| } | ||
| return response.text(); | ||
| }) | ||
| .then(function (content) { | ||
| var currentSrc = _this.props.src; | ||
| // the current src don't match the previous one, skipping... | ||
| if (src !== currentSrc) { | ||
| if (exports.cacheStore[src].status === helpers_1.STATUS.LOADING) { | ||
| delete exports.cacheStore[src]; | ||
| return fetch(src, fetchOptions) | ||
| .then(function (response) { | ||
| var contentType = response.headers.get('content-type'); | ||
| var _a = __read((contentType || '').split(/ ?; ?/), 1), fileType = _a[0]; | ||
| if (response.status > 299) { | ||
| throw new Error('Not found'); | ||
| } | ||
| return; | ||
| } | ||
| _this.handleLoad(content); | ||
| /* istanbul ignore else */ | ||
| if (cacheRequests) { | ||
| var cache = exports.cacheStore[src]; | ||
| if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.includes(d); })) { | ||
| throw new Error("Content type isn't valid: ".concat(fileType)); | ||
| } | ||
| return response.text(); | ||
| }) | ||
| .then(function (content) { | ||
| var currentSrc = _this.props.src; | ||
| // the current src don't match the previous one, skipping... | ||
| if (src !== currentSrc) { | ||
| if (exports.cacheStore[src].status === helpers_1.STATUS.LOADING) { | ||
| delete exports.cacheStore[src]; | ||
| } | ||
| return; | ||
| } | ||
| _this.handleLoad(content); | ||
| /* istanbul ignore else */ | ||
| if (cache) { | ||
| cache.content = content; | ||
| cache.status = helpers_1.STATUS.LOADED; | ||
| if (cacheRequests) { | ||
| var cache = exports.cacheStore[src]; | ||
| /* istanbul ignore else */ | ||
| if (cache) { | ||
| cache.content = content; | ||
| cache.status = helpers_1.STATUS.LOADED; | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| .catch(function (error) { | ||
| _this.handleError(error); | ||
| /* istanbul ignore else */ | ||
| if (cacheRequests) { | ||
| var cache = exports.cacheStore[src]; | ||
| }) | ||
| .catch(function (error) { | ||
| _this.handleError(error); | ||
| /* istanbul ignore else */ | ||
| if (cache) { | ||
| delete exports.cacheStore[src]; | ||
| if (cacheRequests) { | ||
| var cache = exports.cacheStore[src]; | ||
| /* istanbul ignore else */ | ||
| if (cache) { | ||
| delete exports.cacheStore[src]; | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| catch (error) { | ||
| return _this.handleError(new Error(error.message)); | ||
| } | ||
| } | ||
| catch (error) { | ||
| return _this.handleError(new Error(error.message)); | ||
| } | ||
| }; | ||
| }); | ||
| _this.state = { | ||
@@ -164,19 +196,53 @@ content: '', | ||
| } | ||
| InlineSVG.prototype.componentDidMount = function () { | ||
| this.isActive = true; | ||
| if (!(0, helpers_1.canUseDOM)()) { | ||
| return; | ||
| Object.defineProperty(InlineSVG.prototype, "componentDidMount", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| this.isActive = true; | ||
| if (!(0, helpers_1.canUseDOM)() || this.isInitialized) { | ||
| return; | ||
| } | ||
| var status = this.state.status; | ||
| var src = this.props.src; | ||
| try { | ||
| /* istanbul ignore else */ | ||
| if (status === helpers_1.STATUS.PENDING) { | ||
| /* istanbul ignore else */ | ||
| if (!(0, helpers_1.isSupportedEnvironment)()) { | ||
| throw new Error('Browser does not support SVG'); | ||
| } | ||
| /* istanbul ignore else */ | ||
| if (!src) { | ||
| throw new Error('Missing src'); | ||
| } | ||
| this.load(); | ||
| } | ||
| } | ||
| catch (error) { | ||
| this.handleError(error); | ||
| } | ||
| this.isInitialized = true; | ||
| } | ||
| var status = this.state.status; | ||
| var src = this.props.src; | ||
| try { | ||
| /* istanbul ignore else */ | ||
| if (status === helpers_1.STATUS.PENDING) { | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "componentDidUpdate", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (previousProps, previousState) { | ||
| if (!(0, helpers_1.canUseDOM)()) { | ||
| return; | ||
| } | ||
| var _a = this.state, hasCache = _a.hasCache, status = _a.status; | ||
| var _b = this.props, onLoad = _b.onLoad, src = _b.src; | ||
| if (previousState.status !== helpers_1.STATUS.READY && status === helpers_1.STATUS.READY) { | ||
| /* istanbul ignore else */ | ||
| if (!(0, helpers_1.isSupportedEnvironment)()) { | ||
| throw new Error('Browser does not support SVG'); | ||
| if (onLoad) { | ||
| onLoad(src, hasCache); | ||
| } | ||
| /* istanbul ignore else */ | ||
| } | ||
| if (previousProps.src !== src) { | ||
| if (!src) { | ||
| throw new Error('Missing src'); | ||
| this.handleError(new Error('Missing src')); | ||
| return; | ||
| } | ||
@@ -186,171 +252,188 @@ this.load(); | ||
| } | ||
| catch (error) { | ||
| this.handleError(error); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "componentWillUnmount", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| this.isActive = false; | ||
| } | ||
| }; | ||
| InlineSVG.prototype.componentDidUpdate = function (previousProps, previousState) { | ||
| if (!(0, helpers_1.canUseDOM)()) { | ||
| return; | ||
| } | ||
| var _a = this.state, hasCache = _a.hasCache, status = _a.status; | ||
| var _b = this.props, onLoad = _b.onLoad, src = _b.src; | ||
| if (previousState.status !== helpers_1.STATUS.READY && status === helpers_1.STATUS.READY) { | ||
| /* istanbul ignore else */ | ||
| if (onLoad) { | ||
| onLoad(src, hasCache); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "getNode", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _a = this.props, description = _a.description, title = _a.title; | ||
| try { | ||
| var svgText = this.processSVG(); | ||
| var node = (0, react_from_dom_1.default)(svgText, { nodeOnly: true }); | ||
| if (!node || !(node instanceof SVGSVGElement)) { | ||
| throw new Error('Could not convert the src to a DOM Node'); | ||
| } | ||
| var svg = this.updateSVGAttributes(node); | ||
| if (description) { | ||
| var originalDesc = svg.querySelector('desc'); | ||
| if (originalDesc && originalDesc.parentNode) { | ||
| originalDesc.parentNode.removeChild(originalDesc); | ||
| } | ||
| var descElement = document.createElement('desc'); | ||
| descElement.innerHTML = description; | ||
| svg.prepend(descElement); | ||
| } | ||
| if (title) { | ||
| var originalTitle = svg.querySelector('title'); | ||
| if (originalTitle && originalTitle.parentNode) { | ||
| originalTitle.parentNode.removeChild(originalTitle); | ||
| } | ||
| var titleElement = document.createElement('title'); | ||
| titleElement.innerHTML = title; | ||
| svg.prepend(titleElement); | ||
| } | ||
| return svg; | ||
| } | ||
| } | ||
| if (previousProps.src !== src) { | ||
| if (!src) { | ||
| this.handleError(new Error('Missing src')); | ||
| return; | ||
| catch (error) { | ||
| return this.handleError(error); | ||
| } | ||
| this.load(); | ||
| } | ||
| }; | ||
| InlineSVG.prototype.componentWillUnmount = function () { | ||
| this.isActive = false; | ||
| }; | ||
| InlineSVG.prototype.getNode = function () { | ||
| var _a = this.props, description = _a.description, title = _a.title; | ||
| try { | ||
| var svgText = this.processSVG(); | ||
| var node = (0, react_from_dom_1.default)(svgText, { nodeOnly: true }); | ||
| if (!node || !(node instanceof SVGSVGElement)) { | ||
| throw new Error('Could not convert the src to a DOM Node'); | ||
| } | ||
| var svg = this.updateSVGAttributes(node); | ||
| if (description) { | ||
| var originalDesc = svg.querySelector('desc'); | ||
| if (originalDesc && originalDesc.parentNode) { | ||
| originalDesc.parentNode.removeChild(originalDesc); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "getElement", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| try { | ||
| var node = this.getNode(); | ||
| var element = (0, react_from_dom_1.default)(node); | ||
| if (!element || !React.isValidElement(element)) { | ||
| throw new Error('Could not convert the src to a React element'); | ||
| } | ||
| var descElement = document.createElement('desc'); | ||
| descElement.innerHTML = description; | ||
| svg.prepend(descElement); | ||
| this.setState({ | ||
| element: element, | ||
| status: helpers_1.STATUS.READY, | ||
| }); | ||
| } | ||
| if (title) { | ||
| var originalTitle = svg.querySelector('title'); | ||
| if (originalTitle && originalTitle.parentNode) { | ||
| originalTitle.parentNode.removeChild(originalTitle); | ||
| } | ||
| var titleElement = document.createElement('title'); | ||
| titleElement.innerHTML = title; | ||
| svg.prepend(titleElement); | ||
| catch (error) { | ||
| this.handleError(new Error(error.message)); | ||
| } | ||
| return svg; | ||
| } | ||
| catch (error) { | ||
| return this.handleError(error); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "load", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _this = this; | ||
| /* istanbul ignore else */ | ||
| if (this.isActive) { | ||
| this.setState({ | ||
| content: '', | ||
| element: null, | ||
| status: helpers_1.STATUS.LOADING, | ||
| }, function () { | ||
| var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src; | ||
| var cache = cacheRequests && exports.cacheStore[src]; | ||
| if (cache && cache.status === helpers_1.STATUS.LOADED) { | ||
| _this.handleLoad(cache.content); | ||
| return; | ||
| } | ||
| var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/); | ||
| var inlineSrc; | ||
| if (dataURI) { | ||
| inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]); | ||
| } | ||
| else if (src.includes('<svg')) { | ||
| inlineSrc = src; | ||
| } | ||
| if (inlineSrc) { | ||
| _this.handleLoad(inlineSrc); | ||
| return; | ||
| } | ||
| _this.request(); | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| InlineSVG.prototype.getElement = function () { | ||
| try { | ||
| var node = this.getNode(); | ||
| var element = (0, react_from_dom_1.default)(node); | ||
| if (!element || !React.isValidElement(element)) { | ||
| throw new Error('Could not convert the src to a React element'); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "updateSVGAttributes", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function (node) { | ||
| var _this = this; | ||
| var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs; | ||
| var replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole']; | ||
| var linkAttributes = ['href', 'xlink:href']; | ||
| var isDataValue = function (name, value) { | ||
| return linkAttributes.includes(name) && (value ? !value.includes('#') : false); | ||
| }; | ||
| if (!uniquifyIDs) { | ||
| return node; | ||
| } | ||
| this.setState({ | ||
| element: element, | ||
| status: helpers_1.STATUS.READY, | ||
| }); | ||
| } | ||
| catch (error) { | ||
| this.handleError(new Error(error.message)); | ||
| } | ||
| }; | ||
| InlineSVG.prototype.load = function () { | ||
| var _this = this; | ||
| /* istanbul ignore else */ | ||
| if (this.isActive) { | ||
| this.setState({ | ||
| content: '', | ||
| element: null, | ||
| status: helpers_1.STATUS.LOADING, | ||
| }, function () { | ||
| var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src; | ||
| var cache = cacheRequests && exports.cacheStore[src]; | ||
| if (cache && cache.status === helpers_1.STATUS.LOADED) { | ||
| _this.handleLoad(cache.content); | ||
| return; | ||
| __spreadArray([], __read(node.children), false).map(function (d) { | ||
| if (d.attributes && d.attributes.length) { | ||
| var attributes_1 = Object.values(d.attributes).map(function (a) { | ||
| var attribute = a; | ||
| var match = a.value.match(/url\((.*?)\)/); | ||
| if (match && match[1]) { | ||
| attribute.value = a.value.replace(match[0], "url(".concat(baseURL).concat(match[1], "__").concat(_this.hash, ")")); | ||
| } | ||
| return attribute; | ||
| }); | ||
| replaceableAttributes.forEach(function (r) { | ||
| var attribute = attributes_1.find(function (a) { return a.name === r; }); | ||
| if (attribute && !isDataValue(r, attribute.value)) { | ||
| attribute.value = "".concat(attribute.value, "__").concat(_this.hash); | ||
| } | ||
| }); | ||
| } | ||
| var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/); | ||
| var inlineSrc; | ||
| if (dataURI) { | ||
| inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]); | ||
| if (d.children.length) { | ||
| return _this.updateSVGAttributes(d); | ||
| } | ||
| else if (src.includes('<svg')) { | ||
| inlineSrc = src; | ||
| } | ||
| if (inlineSrc) { | ||
| _this.handleLoad(inlineSrc); | ||
| return; | ||
| } | ||
| _this.request(); | ||
| return d; | ||
| }); | ||
| } | ||
| }; | ||
| InlineSVG.prototype.updateSVGAttributes = function (node) { | ||
| var _this = this; | ||
| var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs; | ||
| var replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole']; | ||
| var linkAttributes = ['href', 'xlink:href']; | ||
| var isDataValue = function (name, value) { | ||
| return linkAttributes.includes(name) && (value ? !value.includes('#') : false); | ||
| }; | ||
| if (!uniquifyIDs) { | ||
| return node; | ||
| } | ||
| __spreadArray([], __read(node.children), false).map(function (d) { | ||
| if (d.attributes && d.attributes.length) { | ||
| var attributes_1 = Object.values(d.attributes).map(function (a) { | ||
| var attribute = a; | ||
| var match = a.value.match(/url\((.*?)\)/); | ||
| if (match && match[1]) { | ||
| attribute.value = a.value.replace(match[0], "url(".concat(baseURL).concat(match[1], "__").concat(_this.hash, ")")); | ||
| } | ||
| return attribute; | ||
| }); | ||
| replaceableAttributes.forEach(function (r) { | ||
| var attribute = attributes_1.find(function (a) { return a.name === r; }); | ||
| if (attribute && !isDataValue(r, attribute.value)) { | ||
| attribute.value = "".concat(attribute.value, "__").concat(_this.hash); | ||
| } | ||
| }); | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "processSVG", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var content = this.state.content; | ||
| var preProcessor = this.props.preProcessor; | ||
| if (preProcessor) { | ||
| return preProcessor(content); | ||
| } | ||
| if (d.children.length) { | ||
| return _this.updateSVGAttributes(d); | ||
| return content; | ||
| } | ||
| }); | ||
| Object.defineProperty(InlineSVG.prototype, "render", { | ||
| enumerable: false, | ||
| configurable: true, | ||
| writable: true, | ||
| value: function () { | ||
| var _a = this.state, element = _a.element, status = _a.status; | ||
| var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d; | ||
| var elementProps = (0, helpers_1.omit)(this.props, 'baseURL', 'cacheRequests', 'children', 'description', 'fetchOptions', 'innerRef', 'loader', 'onError', 'onLoad', 'preProcessor', 'src', 'title', 'uniqueHash', 'uniquifyIDs'); | ||
| if (!(0, helpers_1.canUseDOM)()) { | ||
| return loader; | ||
| } | ||
| return d; | ||
| }); | ||
| return node; | ||
| }; | ||
| InlineSVG.prototype.processSVG = function () { | ||
| var content = this.state.content; | ||
| var preProcessor = this.props.preProcessor; | ||
| if (preProcessor) { | ||
| return preProcessor(content); | ||
| } | ||
| return content; | ||
| }; | ||
| InlineSVG.prototype.render = function () { | ||
| var _a = this.state, element = _a.element, status = _a.status; | ||
| var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d; | ||
| var elementProps = (0, helpers_1.omit)(this.props, 'baseURL', 'cacheRequests', 'children', 'description', 'fetchOptions', 'innerRef', 'loader', 'onError', 'onLoad', 'preProcessor', 'src', 'title', 'uniqueHash', 'uniquifyIDs'); | ||
| if (!(0, helpers_1.canUseDOM)()) { | ||
| if (element) { | ||
| return React.cloneElement(element, __assign({ ref: innerRef }, elementProps)); | ||
| } | ||
| if ([helpers_1.STATUS.UNSUPPORTED, helpers_1.STATUS.FAILED].includes(status)) { | ||
| return children; | ||
| } | ||
| return loader; | ||
| } | ||
| if (element) { | ||
| return React.cloneElement(element, __assign({ ref: innerRef }, elementProps)); | ||
| }); | ||
| Object.defineProperty(InlineSVG, "defaultProps", { | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true, | ||
| value: { | ||
| cacheRequests: true, | ||
| uniquifyIDs: false, | ||
| } | ||
| if ([helpers_1.STATUS.UNSUPPORTED, helpers_1.STATUS.FAILED].includes(status)) { | ||
| return children; | ||
| } | ||
| return loader; | ||
| }; | ||
| InlineSVG.defaultProps = { | ||
| cacheRequests: true, | ||
| uniquifyIDs: false, | ||
| }; | ||
| }); | ||
| return InlineSVG; | ||
@@ -357,0 +440,0 @@ }(React.PureComponent)); |
| { | ||
| "name": "react-inlinesvg", | ||
| "version": "3.0.0", | ||
| "version": "3.0.1", | ||
| "description": "An SVG loader for React", | ||
@@ -42,34 +42,34 @@ "author": "Gil Barbara <gilbarbara@gmail.com>", | ||
| "devDependencies": { | ||
| "@gilbarbara/eslint-config": "^0.2.1", | ||
| "@gilbarbara/helpers": "^0.5.1", | ||
| "@gilbarbara/eslint-config": "^0.3.1", | ||
| "@gilbarbara/helpers": "^0.6.3", | ||
| "@gilbarbara/prettier-config": "^0.1.0", | ||
| "@gilbarbara/tsconfig": "^0.1.0", | ||
| "@size-limit/preset-small-lib": "^7.0.8", | ||
| "@testing-library/jest-dom": "^5.16.4", | ||
| "@testing-library/react": "^13.0.1", | ||
| "@gilbarbara/tsconfig": "^0.1.1", | ||
| "@size-limit/preset-small-lib": "^8.0.1", | ||
| "@testing-library/jest-dom": "^5.16.5", | ||
| "@testing-library/react": "^13.3.0", | ||
| "@types/exenv": "^1.2.0", | ||
| "@types/fetch-mock": "^7.3.5", | ||
| "@types/jest": "^27.4.1", | ||
| "@types/node": "^17.0.24", | ||
| "@types/node-fetch": "^2.6.1", | ||
| "@types/react": "^18.0.5", | ||
| "@types/react-dom": "^18.0.1", | ||
| "@types/jest": "^28.1.7", | ||
| "@types/node": "^18.7.6", | ||
| "@types/node-fetch": "^2.6.2", | ||
| "@types/react": "^18.0.17", | ||
| "@types/react-dom": "^18.0.6", | ||
| "cross-fetch": "^3.1.5", | ||
| "del-cli": "^3.0.1", | ||
| "http-server": "^14.1.0", | ||
| "husky": "^7.0.4", | ||
| "jest": "^27.5.1", | ||
| "jest-chain": "^1.1.5", | ||
| "jest-extended": "^2.0.0", | ||
| "del-cli": "^5.0.0", | ||
| "http-server": "^14.1.1", | ||
| "husky": "^8.0.1", | ||
| "jest": "^28.1.3", | ||
| "jest-environment-jsdom": "^28.1.3", | ||
| "jest-extended": "^3.0.2", | ||
| "jest-fetch-mock": "^3.0.3", | ||
| "jest-serializer-html": "^7.1.0", | ||
| "jest-watch-typeahead": "^1.0.0", | ||
| "react": "^18.0.0", | ||
| "react-dom": "^18.0.0", | ||
| "jest-watch-typeahead": "^2.0.0", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "repo-tools": "^0.2.2", | ||
| "size-limit": "^7.0.8", | ||
| "size-limit": "^8.0.1", | ||
| "start-server-and-test": "^1.14.0", | ||
| "ts-jest": "^27.1.4", | ||
| "ts-node": "^10.7.0", | ||
| "typescript": "^4.6.3" | ||
| "ts-jest": "^28.0.8", | ||
| "ts-node": "^10.9.1", | ||
| "typescript": "^4.7.4" | ||
| }, | ||
@@ -76,0 +76,0 @@ "scripts": { |
| # react-inlinesvg | ||
| [](https://www.npmjs.com/package/react-inlinesvg) [](https://travis-ci.com/gilbarbara/react-inlinesvg) [](https://codeclimate.com/github/gilbarbara/react-inlinesvg/maintainability) [](https://codeclimate.com/github/gilbarbara/react-inlinesvg/test_coverage) | ||
| [](https://www.npmjs.com/package/react-inlinesvg) [](https://github.com/gilbarbara/react-inlinesvg/actions/workflows/main.yml) [](https://codeclimate.com/github/gilbarbara/react-inlinesvg/maintainability) [](https://codeclimate.com/github/gilbarbara/react-inlinesvg/test_coverage) | ||
| Load inline, local or remote SVGs in your React components. | ||
| View the [demo](https://codesandbox.io/s/github/gilbarbara/react-inlinesvg/tree/main/demo) | ||
| ## Highlights | ||
@@ -8,0 +10,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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 by8.53%
89318
- Lines of code
- increased by12.35%
1547
- Number of lines in readme file
- increased by1.1%
184
No dependency changes