{"_id":"@d0whc3r/stencil-inline-svg","_rev":"1-5217d94cbc15196b34e7e1b28b009d86","name":"@d0whc3r/stencil-inline-svg","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@d0whc3r/stencil-inline-svg","version":"0.1.0","description":"A Stenciljs plugin to insert inline SVGs into components","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"prebuild":"rimraf ./dist && npm run test && npm run lint","build":"tsc && npm run rollup","dev":"tsc --watch","lint":"tslint --project tsconfig.json","release":"np","rollup":"rollup -c","start":"npm run dev","test":"jest --coverage","test.watch":"jest --watch --coverage"},"keywords":["stencil","plugin","svg","inline"],"author":{"name":"Fabricio Rodrigues"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/d0whc3r/stencil-inline-svg"},"devDependencies":{"@types/jest":"^24.0.6","@types/node":"^11.9.4","jest":"^24.1.0","np":"^4.0.2","rimraf":"^2.6.3","rollup":"^1.2.2","ts-jest":"^24.0.0","tslint":"^5.12.1","tslint-ionic-rules":"0.0.21","typescript":"^3.3.3"},"_id":"@d0whc3r/stencil-inline-svg@0.1.0","dist":{"shasum":"a2745a45f1b7663eb79da57e75421598258f4f07","integrity":"sha512-89SXacjdR9qNDvhlTBSRayVkD787E+aSViaKzEfS3LFKkxbyuWoXHqJtMa3qHOogNJ/PDZjhg35zPJnKsalwMQ==","tarball":"https://registry.npmjs.org/@d0whc3r/stencil-inline-svg/-/stencil-inline-svg-0.1.0.tgz","fileCount":11,"unpackedSize":5893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc998eCRA9TVsSAnZWagAAmgEP/Rjnt8NsKzbDp8tuCAHH\nxjiuA4YlqUlV7jCfk6HSp0FGbE9oc1zuIwKomslC2rbk7WUJUCvAihUL3K4B\nRPlzsOMwDeCLZJjLL7fQIGmoP0SJ5UR6JP4C99xYYX1BenWv8dTUJj4PL3VA\nus0EChSvpTGl5niP5jgYDG8CrmMaavBO7GS3I+YhuN4ZcGEgOrBTvxhEplTu\nWZiaXDnE2HLtLVVoZxfvxnaVUwW0Sit9Ml5QPIH8T2F5TBOtQQLD6lbjobxe\nePrWhcKR8JZJ1sLlDd0eCk6SGCn8iPLP9xkmY6P5M2/B2fP1lQUZnUv+Ssfb\nqH18jvQJSdh5SlVzH4DsQz4CiaJ0vIBMNQoM8a4mZjcP7TwQpeBCnX9FhGYv\nSP9E8Wl06F+3sMch8ZVUUFWlTAdwhBCQiOKGVssk4s2NThIcqIrT4URhm/hm\n/HnpbNnt48GfUKwKNkwyAcUwL3SKmhBqQDvujZKwFw4TL9b6//NJGGAe/C8S\nibxzAndk/KuKZKIYZDcStIzx3XhnluoSBt0XuAOCIlLCykkGDoNjrknXMWhM\nfkWiMfQ20DO1Bv57swlMQkqb6qEdh7Au2s2PlGvdWKlw1ENUXflJOVqXJaiq\nfqp8OjbzuAZhUrACLKzoVrkECvPBBVc6Z1K5cUNJOQ9mqlh/kay8FJuG0o61\nvHUB\r\n=Hv7t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFTk1CJR1sE0hwWaPsVPqIf1z0IOt2vFd1BBqOhTGPk/AiEArGUwVv4mm7U3JJUXQ8+hzoFDQlqfOVu3tlbfG4y0F5k="}]},"maintainers":[{"name":"d0whc3r","email":"d0whc3r@gmail.com"}],"_npmUser":{"name":"d0whc3r","email":"d0whc3r@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stencil-inline-svg_0.1.0_1559748382036_0.705032143683819"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-05T15:26:22.011Z","0.1.0":"2019-06-05T15:26:22.519Z","modified":"2022-04-05T02:28:53.442Z"},"maintainers":[{"name":"d0whc3r","email":"d0whc3r@gmail.com"}],"description":"A Stenciljs plugin to insert inline SVGs into components","keywords":["stencil","plugin","svg","inline"],"repository":{"type":"git","url":"git+https://github.com/d0whc3r/stencil-inline-svg"},"author":{"name":"Fabricio Rodrigues"},"license":"MIT","readme":"# stencil-inline-svg\n\nA Stenciljs plugin to insert inline SVGs into components on build time.\n\n## Installation\n\n```bash\nnpm install -D @d0whc3r/stencil-inline-svg\n```\n\n## Usage\n\nFirst of all, you need to declare the global `*.svg` module on your TypeScript project, if you haven't done that yet so it will be possible to directly import SVG files `import Icon from './my-icon.svg'`.\n\n```javascript\n// src/typings.d.ts (example name)\ndeclare module '*.svg' {\n  const svgContent: string;\n\n  export default svgContent;\n}\n```\n\nImport the plugin on your `stencil.config.ts` file and add the `inlineSvg` function to your plugins list.\n\n```javascript\nimport { Config } from '@stencil/core';\nimport { inlineSvg } from 'stencil-inline-svg';\n\nexport const config: Config = {\n  namespace: 'mycomponent',\n  outputTargets: [\n    { type: 'dist' },\n    { type: 'docs' },\n    {\n      type: 'www',\n      serviceWorker: null, // disable service workers\n    },\n  ],\n  plugins: [inlineSvg()],\n};\n```\n\nNow, just import your file and set it as the `innerHTML` property of an element inside your component.\n\n```javascript\nimport { Component } from '@stencil/core';\nimport Lambo from '../../assets/img/gallardo.svg';\n\n@Component({\n  tag: 'my-component',\n  styleUrl: 'my-component.css',\n  shadow: true,\n})\nexport class MyComponent {\n  render() {\n    return <img src={Lambo} />;\n  }\n}\n```\n\n## Links\n\nStenciljs - https://stenciljs.com/\n\nLamborghini SVG - https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/gallardo.svg\n","readmeFilename":"readme.md"}