{"_id":"@arthur-lobo/load-svg","_rev":"4-a5666bb9fea0a0a119a90d9e5898787c","name":"@arthur-lobo/load-svg","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@arthur-lobo/load-svg","version":"1.0.0","keywords":["svg","html","load"],"author":{"name":"Arthur Lobo","email":"64273139+ArthurLobopro@users.noreply.github.com"},"license":"MIT","_id":"@arthur-lobo/load-svg@1.0.0","maintainers":[{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com"}],"homepage":"https://github.com/ArthurLobopro/load-svg#readme","bugs":{"url":"https://github.com/ArthurLobopro/load-svg/issues"},"dist":{"shasum":"35c96177682f28fb96a5feb07bdec76084c7d1e2","tarball":"https://registry.npmjs.org/@arthur-lobo/load-svg/-/load-svg-1.0.0.tgz","fileCount":7,"integrity":"sha512-Ki+g+KJTpAtPqZF7xr3XqW0SKH8OMJ5pGQJGyCVLCPoN+0pOYmpZfwnpPpm1fRdck6s4SOhX/hTALl3rk10f+w==","signatures":[{"sig":"MEQCIFmDdtheGHjEcpvBZ1jhiVwX4kv4IonqaL0OgI4LSvXBAiA1QDMMEjy9mQnJ/prXdmqi8XKK0oqwsC/zQB5IPU4hVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12049},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/esm/index.js","require":"./dist/commonjs/index.js"}},"gitHead":"febf12454f49033456a06d047cb9494b0eacbb63","scripts":{"build":"yarn webpack --mode development","prepack":"yarn build"},"_npmUser":{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com"},"repository":{"url":"git+https://github.com/ArthurLobopro/load-svg.git","type":"git"},"_npmVersion":"10.3.0","description":"WebComponent to load svg on HTML","directories":{},"_nodeVersion":"20.10.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^5.90.0","ts-loader":"^9.5.1","typescript":"^5.3.3","webpack-cli":"^5.1.4"},"_npmOperationalInternal":{"tmp":"tmp/load-svg_1.0.0_1706491869116_0.14471884790529566","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@arthur-lobo/load-svg","version":"1.0.1","keywords":["svg","html","load"],"author":{"name":"Arthur Lobo","email":"64273139+ArthurLobopro@users.noreply.github.com"},"license":"MIT","_id":"@arthur-lobo/load-svg@1.0.1","maintainers":[{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com"}],"homepage":"https://github.com/ArthurLobopro/load-svg#readme","bugs":{"url":"https://github.com/ArthurLobopro/load-svg/issues"},"dist":{"shasum":"8a6aef8d8fa51a84e0d2fee3414f6c2074c1b33c","tarball":"https://registry.npmjs.org/@arthur-lobo/load-svg/-/load-svg-1.0.1.tgz","fileCount":8,"integrity":"sha512-ab1PCuo7CqvqJd2Px2XxCe/+Dq8FKMGu1/7U/pkYw7OJWYILASQ39ZZDnYDZdP0JSdnDBO3mrvjEaRzXp2Rhfg==","signatures":[{"sig":"MEUCIA19Vg5MxIVhb5cg4ucyfy3ePzKDtA8fxQZVSvCDBGp8AiEAlgD+c8whManXR4OyRwAZuMUsq1/o4KyrBlmNCgXjkBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14594},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/esm/index.js","require":"./dist/commonjs/index.js"}},"gitHead":"823ee202b2da899e219d5becd0796582c47b6fa6","scripts":{"build":"yarn webpack --mode development","prepack":"yarn build"},"_npmUser":{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com"},"repository":{"url":"git+https://github.com/ArthurLobopro/load-svg.git","type":"git"},"_npmVersion":"10.3.0","description":"WebComponent to load svg on HTML","directories":{},"_nodeVersion":"20.10.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^5.90.0","ts-loader":"^9.5.1","typescript":"^5.3.3","webpack-cli":"^5.1.4"},"_npmOperationalInternal":{"tmp":"tmp/load-svg_1.0.1_1706559224204_0.047147905171746496","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@arthur-lobo/load-svg","version":"1.0.2","keywords":["svg","html","load"],"author":{"name":"Arthur Lobo","email":"64273139+ArthurLobopro@users.noreply.github.com"},"license":"MIT","_id":"@arthur-lobo/load-svg@1.0.2","maintainers":[{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com"}],"homepage":"https://github.com/ArthurLobopro/load-svg#readme","bugs":{"url":"https://github.com/ArthurLobopro/load-svg/issues"},"dist":{"shasum":"1b2d1aa155b415c80c48f413c511a209178522fc","tarball":"https://registry.npmjs.org/@arthur-lobo/load-svg/-/load-svg-1.0.2.tgz","fileCount":8,"integrity":"sha512-eE2FLQHugZ0f1uH7GHKtYpHt1Z4CK9l6k/Z2tbUYpualP5Ky6qy1KOSdflupcqhoYMB1Da45NBi36ZbrOiREaw==","signatures":[{"sig":"MEUCIQCrublyoVDdjTy93LJOYXWzEHyGG1zXFRHfaImX7LIenAIgOopHT2WdW63aTHXO9LmdWGU2H4OIVa1FcqWa/roZr/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17289},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/esm/index.js","require":"./dist/commonjs/index.js"}},"gitHead":"ad3ecc2926cab8af46db114a198e9fc3e52d2012","scripts":{"build":"yarn webpack --mode development","prepack":"yarn build"},"_npmUser":{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com"},"repository":{"url":"git+https://github.com/ArthurLobopro/load-svg.git","type":"git"},"_npmVersion":"10.3.0","description":"WebComponent to load svg on HTML","directories":{},"_nodeVersion":"20.10.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"webpack":"^5.90.0","ts-loader":"^9.5.1","typescript":"^5.3.3","webpack-cli":"^5.1.4"},"_npmOperationalInternal":{"tmp":"tmp/load-svg_1.0.2_1707162620950_0.18755544815472636","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@arthur-lobo/load-svg","version":"1.1.1","description":"WebComponent to load svg on HTML","license":"MIT","author":{"name":"Arthur Lobo","email":"64273139+ArthurLobopro@users.noreply.github.com"},"repository":{"type":"git","url":"git+https://github.com/ArthurLobopro/load-svg.git"},"keywords":["svg","html","load"],"scripts":{"build":"yarn webpack --mode development","prepack":"yarn build"},"exports":{".":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","types":"./dist/index.d.ts"}},"devDependencies":{"ts-loader":"^9.5.1","typescript":"^5.3.3","webpack":"^5.90.0","webpack-cli":"^5.1.4"},"publishConfig":{"access":"public"},"_id":"@arthur-lobo/load-svg@1.1.1","gitHead":"7fcbb8a2ad54ba47853cfdb0d0269316eb23a397","bugs":{"url":"https://github.com/ArthurLobopro/load-svg/issues"},"homepage":"https://github.com/ArthurLobopro/load-svg#readme","_nodeVersion":"24.2.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-DeftVlcBBBIOPmyYqn9imDiXXyg98/H5Ov5yhb7z+TCvtXKea8hXooBxR8mq3FGtMK7DkqwicOgAJAKAPMy7tA==","shasum":"14b471811fbd919c7c8c99c3dd0d4f4026ed1138","tarball":"https://registry.npmjs.org/@arthur-lobo/load-svg/-/load-svg-1.1.1.tgz","fileCount":8,"unpackedSize":17685,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC5lEOdTw82bPgIjDSrG3SkUe6gfYvMLR14/Kp2TkgfegIgGujM8stq8Z7TS8mq8+BkYkpcTEfveZtkZHHKQEdYl2A="}]},"_npmUser":{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com","actor":{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/load-svg_1.1.1_1751813805304_0.06833973880650412"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-29T01:31:09.003Z","modified":"2025-07-06T14:56:45.680Z","1.0.0":"2024-01-29T01:31:09.286Z","1.0.1":"2024-01-29T20:13:44.369Z","1.0.2":"2024-02-05T19:50:21.099Z","1.1.1":"2025-07-06T14:56:45.480Z"},"bugs":{"url":"https://github.com/ArthurLobopro/load-svg/issues"},"author":{"name":"Arthur Lobo","email":"64273139+ArthurLobopro@users.noreply.github.com"},"license":"MIT","homepage":"https://github.com/ArthurLobopro/load-svg#readme","keywords":["svg","html","load"],"repository":{"type":"git","url":"git+https://github.com/ArthurLobopro/load-svg.git"},"description":"WebComponent to load svg on HTML","maintainers":[{"name":"arthur-lobo","email":"arthurciprianolobo@gmail.com"}],"readme":"# Load SVG\n\nSimple and light package with custom WebComponents to load SVGs into HTML.\n\n## How to use\n\n* On your js file add: \n\n```ts\n import { registerLoadSVG, registerInsertSVG } from \"../dist/esm/index.js\"\n\nregisterLoadSVG()\nregisterInsertSVG()\n        \n```\n\n> It will enable two new tags on your HTML tag: `load-svg` and `insert-svg`\n\nYou can load an SVG file using the load-svg tag like this:\n\n```html\n<load-svg src='./mysvg.svg'></load-svg>\n```\n\nYou can insert an SVG file using the insert-svg tag like this:\n\n```html\n<insert-svg src='./mysvg.svg'></-svg>\n```\n\n### load-svg tag behavior\n\n`load-svg` will render the svg on a shadow-dom, the svg inside a `load-svg` can't be finded using `document.querySelector()` and styles using the `svg` selector like this:\n\n```css\nsvg {\n    /*Your svg style*/\n}\n```\n\nBut all styles applied in `load-svg` tag will be inherited by svg inside `load-svg`, for example:\n\n```css\nload-svg {\n    fill: blue;\n}\n```\n\n### insert-svg tag behavior\n\n`insert-svg` tags replace themselves per the loaded SVG like you manually inserted the SVG element in the HTML file. \n\nSo, all SVG files loaded by `insert-svg` can be styled using CSS and also can be found using `document`.querySelector()`.","readmeFilename":"README.md"}