├── .travis.yml ├── .gitignore ├── babel.config.js ├── CHANGELOG.md ├── .npmignore ├── .editorconfig ├── .eslintrc ├── LICENSE ├── package.json ├── src └── index.js └── README.md /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | - lts/* 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /dist/ 2 | 3 | node_modules/ 4 | yarn.lock 5 | npm-debug.log 6 | yarn-error.log 7 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "presets": [ 3 | ["@babel/preset-env", {"modules": false}] 4 | ] 5 | }; 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 1.0.2 - 2019-03-01 2 | - update package.json "main" field and add "module" field 3 | 4 | ## 1.0.1 - 2018-03-26 5 | * Add rollup build 6 | * Fix .npmignore 7 | 8 | ## 1.0.0 - 2018-03-17 9 | * Initial release 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .npmignore 2 | .gitignore 3 | .editorconfig 4 | .babelrc 5 | .eslintrc 6 | .idea 7 | 8 | node_modules/ 9 | package-lock.json 10 | yarn.lock 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | *.test.js 15 | .travis.yml 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.{json,yml}] 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-airbnb-base", 3 | "rules": { 4 | "indent": ["error", 4, { "SwitchCase": 1 }], 5 | "max-len": ["off"], 6 | "no-param-reassign": ["off"], 7 | "no-use-before-define": ["off"] 8 | }, 9 | "env": { 10 | "jquery": true 11 | } 12 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-inline-svg", 3 | "version": "1.0.2", 4 | "description": "Replace SVG images with inline SVG element", 5 | "main": "dist/jquery-inline-svg.js", 6 | "module": "src/index.js", 7 | "unpkg": "dist/jquery-inline-svg.min.js", 8 | "scripts": { 9 | "build": "npm run bundle && npm run bundle:min", 10 | "bundle": "rollup -c build/rollup.conf.js", 11 | "bundle:min": "rollup -c build/rollup-min.conf.js", 12 | "test": "npm run lint", 13 | "lint": "eslint src/*.js", 14 | "prepublishOnly": "npm run test && npm run build", 15 | "precommit": "echo 'Pre-commit checks...' && npm run lint" 16 | }, 17 | "pre-commit": [ 18 | "precommit" 19 | ], 20 | "keywords": [ 21 | "svg", 22 | "inline", 23 | "jquery" 24 | ], 25 | "author": "shrpne ", 26 | "license": "MIT", 27 | "repository": "shrpne/jquery-inline-svg", 28 | "bugs": { 29 | "url": "https://github.com/shrpne/jquery-inline-svg/issues" 30 | }, 31 | "homepage": "https://github.com/shrpne/jquery-inline-svg", 32 | "dependencies": {}, 33 | "devDependencies": { 34 | "@babel/core": "^7.3.4", 35 | "@babel/preset-env": "^7.3.4", 36 | "eslint": "^5", 37 | "eslint-config-airbnb-base": "^13.1.0", 38 | "eslint-plugin-import": "^2.16.0", 39 | "pre-commit": "^1.2.2", 40 | "rollup": "^1.4.0", 41 | "rollup-plugin-babel": "^4.3.2", 42 | "rollup-plugin-terser": "^4.0.4" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 2 | const cache = {}; 3 | 4 | (function wrapJquery($) { 5 | $.fn.inlineSvg = function fnInlineSvg() { 6 | this.each(imgToSvg); 7 | 8 | return this; 9 | }; 10 | 11 | function imgToSvg() { 12 | const $img = $(this); 13 | const src = $img.attr('src'); 14 | 15 | // fill cache by src with promise 16 | if (!cache[src]) { 17 | const d = $.Deferred(); 18 | $.get(src, (data) => { 19 | d.resolve($(data).find('svg')); 20 | }); 21 | cache[src] = d.promise(); 22 | } 23 | 24 | // replace img with svg when cached promise resolves 25 | cache[src].then((svg) => { 26 | const $svg = $(svg).clone(); 27 | 28 | if ($img.attr('id')) $svg.attr('id', $img.attr('id')); 29 | if ($img.attr('class')) $svg.attr('class', $img.attr('class')); 30 | if ($img.attr('style')) $svg.attr('style', $img.attr('style')); 31 | 32 | if ($img.attr('width')) { 33 | $svg.attr('width', $img.attr('width')); 34 | if (!$img.attr('height')) $svg.removeAttr('height'); 35 | } 36 | if ($img.attr('height')) { 37 | $svg.attr('height', $img.attr('height')); 38 | if (!$img.attr('width')) $svg.removeAttr('width'); 39 | } 40 | 41 | $svg.insertAfter($img); 42 | $img.trigger('svgInlined', $svg[0]); 43 | $img.remove(); 44 | }); 45 | } 46 | }(jQuery)); 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery Inline SVG 2 | 3 | [![NPM Package](https://img.shields.io/npm/v/jquery-inline-svg.svg?style=flat-square)](https://www.npmjs.org/package/jquery-inline-svg) 4 | [![Minified Size](https://img.shields.io/bundlephobia/min/jquery-inline-svg.svg?style=flat-square)](https://bundlephobia.com/result?p=jquery-inline-svg) 5 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/shrpne/jquery-inline-svg/blob/master/LICENSE) 6 | 7 | Takes an `` with an SVG as its source and replace it with an inline `` so you can manipulate the style of it with CSS/JS etc. 8 | 9 | [ci-img]: https://travis-ci.org/shrpne/jquery-inline-svg.svg 10 | [ci]: https://travis-ci.org/shrpne/jquery-inline-svg 11 | 12 | Other frameworks alternatives: 13 | 14 | - Vue: [vue-inline-svg](https://github.com/shrpne/vue-inline-svg) 15 | - Vanilla: [inline-svg](https://github.com/jonnyhaynes/inline-svg) 16 | 17 | ## Install 18 | 19 | ### npm 20 | ``` 21 | npm install jquery-inline-svg 22 | ``` 23 | 24 | ### cdn 25 | 26 | 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. 27 | 28 | 29 | 30 | ## Usage 31 | 32 | ```html 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 45 | 46 | 47 | ``` 48 | 49 | Or with ES2015 modules 50 | 51 | ```js 52 | import $ from 'jquery'; 53 | import 'jquery-inline-svg'; 54 | 55 | $('[data-inline-svg]').inlineSvg(); 56 | ``` 57 | 58 | 59 | ### Events 60 | `svgInlined` event will be fired on every `` with inlined SVG element as argument 61 | ```js 62 | $('[data-inline-svg]').on('svgInlined', function (e, svgElement) { 63 | const $originalImage = $(this); // <-- original will be removed from the DOM when this event handler function finished 64 | const $inlinedSvgElement = $(svgElement).addClass('is-loaded'); 65 | }) 66 | ``` 67 | 68 | 69 | ## Requirements 70 | This plugin requires jQuery 3 71 | 72 | ## Reference 73 | Inspired by inlineSvg from UIkit 2 https://github.com/uikit/uikit/blob/v2/master/src/js/core/utility.js#L267 74 | 75 | 76 | 77 | 78 | 79 | --------------------------------------------------------------------------------