jquery-inline-svg - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

		@@ -1,6 +0,9 @@
		# Change Log
		This project adheres to [Semantic Versioning](http://semver.org/).
		## 1.0.2 - 2019-03-01
		- update package.json "main" field and add "module" field

		## 1.0.1 - 2018-03-26
		* Add rollup build
		* Fix .npmignore

		## 1.0
		## 1.0.0 - 2018-03-17
		* Initial release

package.json

		{
		"name": "jquery-inline-svg",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "Replace SVG images with inline SVG element",
		"main": "dist/jquery-inline-svg.esm.js",
		"main": "dist/jquery-inline-svg.js",
		"module": "src/index.js",
		"unpkg": "dist/jquery-inline-svg.min.js",
		"scripts": {
		@@ -10,3 +12,4 @@ "test": "eslint src/*.js",
		"bundle": "rollup -c build/rollup.conf.js",
		"bundle:min": "rollup -c build/rollup-min.conf.js"
		"bundle:min": "rollup -c build/rollup-min.conf.js",
		"prepublishOnly": "npm run build"
		},
		@@ -13,0 +16,0 @@ "keywords": [

README.md

		@@ -1,5 +0,9 @@
		# jQuery Inline SVG [![Build Status][ci-img]][ci]
		# jQuery Inline SVG

		Takes an <img> with an SVG as its source and replace it with an inline <svg> so you can manipulate the style of it with CSS/JS etc.
		[![NPM Package](https://img.shields.io/npm/v/jquery-inline-svg.svg?style=flat-square)](https://www.npmjs.org/package/jquery-inline-svg)
		[![Minified Size](https://img.shields.io/bundlephobia/min/jquery-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=jquery-inline-svg)
		[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/shrpne/jquery-inline-svg/blob/master/LICENSE)

		Takes an `<img>` with an SVG as its source and replace it with an inline `<svg>` so you can manipulate the style of it with CSS/JS etc.

		[ci-img]: https://travis-ci.org/shrpne/jquery-inline-svg.svg
		@@ -17,3 +21,3 @@ [ci]: https://travis-ci.org/shrpne/jquery-inline-svg

		Download the [dist/jquery-inline-svg.min.js](https://github.com/shrpne/jquery-inline-svg/blob/master/dist/svg-injector.min.js) file from this repository and add it to your project.
		Download the [dist/jquery-inline-svg.min.js](https://unpkg.com/jquery-inline-svg@latest/dist/jquery-inline-svg.min.js) and add it to your project.

		@@ -24,26 +28,29 @@

		Include the `jquery-inline-svg` script on your page after `jQuery`.

		```html
		<script src="jquery.min.js"></script>
		<script src="jquery-inline-svg.min.js"></script>
		```

		Add some SVG `<img>` tags.

		```html
		<!-- Add some SVG `<img>` tags. -->
		<img src="image-one.svg" data-inline-svg>
		<img src="image-two.svg" data-inline-svg>
		```

		Inline them.
		<!-- Include the `jquery-inline-svg` script on your page after `jQuery`. -->
		<script src="jquery.min.js"></script>
		<script src="jquery-inline-svg.min.js"></script>

		```html
		<!-- Inline images. -->
		<script>
		$('[data-inline-svg]').inlineSvg();
		</script>

		<!-- The `<img>` tags have now been replaced with the full SVG markup. -->
		```

		The `<img>` tags have now been replaced with the full SVG markup.
		Or with ES2015 modules

		```js
		import $ from 'jquery';
		import 'jquery-inline-svg';

		$('[data-inline-svg]').inlineSvg();
		```


		### Events
		@@ -53,3 +60,4 @@ `svgInlined` event will be fired on every `<img>` with inlined SVG element as argument
		$('[data-inline-svg]').on('svgInlined', function (e, svgElement) {
		$(svgElement).addClass('is-loaded');
		const $originalImage = $(this); // <-- original <img> will be removed from the DOM when this event handler function finished
		const $inlinedSvgElement = $(svgElement).addClass('is-loaded');
		})
		@@ -63,3 +71,3 @@ ```
		## Reference
		inlineSvg from UIkit 2 https://github.com/uikit/uikit/blob/v2/master/src/js/core/utility.js#L267
		Inspired by inlineSvg from UIkit 2 https://github.com/uikit/uikit/blob/v2/master/src/js/core/utility.js#L267

		@@ -66,0 +74,0 @@

jquery-inline-svg - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics