{"id":16185997,"url":"https://github.com/iest/babel-plugin-inline-svg","last_synced_at":"2025-03-16T10:31:59.559Z","repository":{"id":24508621,"uuid":"101781011","full_name":"iest/babel-plugin-inline-svg","owner":"iest","description":"Babel plugin to optimise and inline svg","archived":false,"fork":false,"pushed_at":"2022-12-11T17:05:49.000Z","size":561,"stargazers_count":49,"open_issues_count":5,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-20T23:34:09.058Z","etag":null,"topics":["babel","babel-plugin","inline-svg"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iest.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-29T16:09:38.000Z","updated_at":"2024-03-19T11:18:28.000Z","dependencies_parsed_at":"2023-01-14T01:06:11.686Z","dependency_job_id":null,"html_url":"https://github.com/iest/babel-plugin-inline-svg","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iest%2Fbabel-plugin-inline-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iest%2Fbabel-plugin-inline-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iest%2Fbabel-plugin-inline-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iest%2Fbabel-plugin-inline-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iest","download_url":"https://codeload.github.com/iest/babel-plugin-inline-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814898,"owners_count":20352037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","babel-plugin","inline-svg"],"created_at":"2024-10-10T07:16:29.557Z","updated_at":"2025-03-16T10:31:59.139Z","avatar_url":"https://github.com/iest.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-inline-svg\n\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n[![Dependency status][david-dm-image]][david-dm-url]\n\n\u003e Import raw SVG files into your code, optimising with [SVGO](https://github.com/svg/svgo/), and removing ID namespace conflicts.\n\n\u003c!-- TOC depthFrom:2 depthTo:3 --\u003e\n\n- [What it do](#what-it-do)\n  - [1. Turns `import` statements into inline SVG strings](#1-turns-import-statements-into-inline-svg-strings)\n  - [2. Optimises the SVG through SVGO](#2-optimises-the-svg-through-svgo)\n  - [3. Namespaces `id`’s to prevent conflicts](#3-namespaces-ids-to-prevent-conflicts)\n  - [4. Exporting as dataURI format](#4-exporting-as-datauri-format)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Via `.babelrc` (Recommended)](#via-babelrc-recommended)\n  - [Options](#options)\n  - [Via CLI](#via-cli)\n  - [Via Node API](#via-node-api)\n\n\u003c!-- /TOC --\u003e\n\n## What it do\n\n### 1. Turns `import` statements into inline SVG strings\n\nSo this:\n\n```js\nimport someSvg from \"some-svg.svg\";\n```\n\nBecomes this:\n\n```js\nvar someSvg =\n  '\u003csvg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\u003ctitle\u003ehome\u003c/title\u003e\u003cpath d=\"M37.6 24.104l-4.145-4.186v-6.389h-3.93v2.416L26.05 12.43a1.456 1.456 0 0 0-2.07 0L12.43 24.104a1.488 1.488 0 0 0 0 2.092c.284.288.658.431 1.031.431h1.733V38h6.517v-8.475h6.608V38h6.517V26.627h1.77v-.006c.36-.01.72-.145.995-.425a1.488 1.488 0 0 0 0-2.092\" fill=\"#191919\" fill-rule=\"evenodd\" id=\"someSvg-someID\"/\u003e\u003c/svg\u003e';\n```\n\nSo you can do something like this maybe:\n\n```js\nimport React from \"react\";\nimport someSvg from \"some-svg.svg\";\n\nconst NaughtyUsage = () =\u003e (\n  \u003cspan\n    dangerouslySetInnerHTML={{\n      __html: someSvg,\n    }}\n  /\u003e\n);\n```\n\n### 2. Optimises the SVG through SVGO\n\nDoes what it says on the tin. You can pass options to the SVGO processor with an `svgo` object in options.\n\nYou can also disable this option if you really want, with `disableSVGO: true`.\n\n### 3. Namespaces `id`’s to prevent conflicts\n\nIf you inline a lot of SVGs you might get namespace conflicts, which could be really annoying if you're styling your SVG in CSS and whatnot. This plugin solves that with some some [regex trickery](.lib/optimize.js#L29). The namespace of the ID comes from the name of import/require variable.\n\nSo given this simple `cheese.svg` file:\n\n```svg\n\u003csvg\u003e\u003ccircle cx=\"10\" cy=\"10\" r=\"50\" id=\"CIRCLE\"\u003e\u003c/circle\u003e\u003c/svg\u003e\n```\n\nWhich you then import like so:\n\n```js\nimport wheelOfCheese from \"cheese.svg\";\n```\n\nYou get the following output:\n\n```js\nvar wheelOfCheese =\n  '\u003csvg\u003e\u003ccircle cx=\"10\" cy=\"10\" r=\"50\" id=\"wheelOfCheese-CIRCLE\"\u003e\u003c/circle\u003e\u003c/svg\u003e';\n```\n\nTo disable this feature, pass `disableNamespaceIds: true` in the options.\n\n### 4. Exporting as dataURI format\n\nIf you need to use the output directly in an image source (\u003cimg src=\u003e or in a css background-image, for example), you can pass `exportDataURI: true` in the options.\nThe output will be encoded as base64 and prefixed with `data:image/svg+xml;base64,`, so you can do something like:\n\n```javascript\nimport logo from \"./logo.svg\";\n\nconst Logo = () =\u003e \u003cimg src={logo} /\u003e;\n```\n\n## Installation\n\n```\nnpm install --save-dev babel-plugin-inline-svg\n```\n\n## Usage\n\n### Via `.babelrc` (Recommended)\n\n**.babelrc**\n\n```json\n{\n  \"plugins\": [\"inline-svg\"]\n}\n```\n\n### Options\n\n- _`ignorePattern`_ - A string regex that imports will be tested against so you can ignore them\n- _`disableSVGO`_ - set to `false` to disable running the svg through SVGO\n- _`disableNamespaceIds`_ - set to `false` to leave all id's as they are\n- _`svgo`_ - an object of SVGO options\n- _`exportDataURI`_ - set to `true` to export a base64-encoded SVG, prefixed with `data:image/svg+xml;base64,`\n\nExample .babelrc:\n\n```js\n\n{\n  \"plugins\": [\n    [\n      \"inline-svg\",\n      {\n        \"ignorePattern\": \"icons\",\n        \"disableNamespaceIds\": true,\n        \"svgo\": {\n          \"plugins\": [\n            {\n              \"removeDimensions\": true,\n            }\n          ]\n\n        }\n      }\n    ]\n  ]\n}\n\n```\n\n**Note:** To function correctly, this babel plugin disables the `cleanupIDs` SVGO plugin by default (to facilitate the ID namespacing). When passing your own SVGO options you might want to remove the `cleanupIDs` plugin so namespacing still works.\n\n**Also note:** the ID namespaceing _can_ be done with a similar SVGO plugin, `prefixIds` — however this prefix is a static string so you might still end up with namespace conflicts.\n\n### Via CLI\n\n```sh\n$ babel --plugins inline-svg script.js\n```\n\n### Via Node API\n\n```javascript\nrequire(\"babel-core\").transform(\"code\", {\n  plugins: [\"inline-svg\"],\n}); // =\u003e { code, map, ast };\n```\n\n[npm-url]: https://npmjs.org/package/babel-plugin-inline-svg\n[downloads-image]: http://img.shields.io/npm/dm/babel-plugin-inline-svg.svg\n[npm-image]: http://img.shields.io/npm/v/babel-plugin-inline-svg.svg\n[david-dm-url]: https://david-dm.org/iest/babel-plugin-inline-svg\n[david-dm-image]: https://david-dm.org/iest/babel-plugin-inline-svg.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiest%2Fbabel-plugin-inline-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiest%2Fbabel-plugin-inline-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiest%2Fbabel-plugin-inline-svg/lists"}