diff --git a/README.md b/README.md index 548b4cc..5db77ca 100755 --- a/README.md +++ b/README.md @@ -1,9 +1,12 @@ # Magical SVG 🪄 +[![GitHub Sponsors](https://img.shields.io/badge/GitHub%20Sponsors-support%20me-EA4AAA?style=flat-square)](https://github.com/sponsors/cyyynthia) [![License](https://img.shields.io/github/license/cyyynthia/vite-plugin-magical-svg.svg?style=flat-square)](https://github.com/cyyynthia/vite-plugin-magical-svg/blob/mistress/LICENSE) [![npm](https://img.shields.io/npm/v/vite-plugin-magical-svg?style=flat-square)](https://npm.im/vite-plugin-magical-svg) An all-in-one [Vite](https://vitejs.dev/) plugin that magically makes working with SVGs and bundling them a breeze. +Can mostly be used as a [drop-in replacement of SVGR](#migrating-from-svgr) and similar tools. + ## Backstory Inspired by a [tweet](https://twitter.com/_developit/status/1382838799420514317) from Preact's creator Jason Miller, I've been looking at plugins that would let me work with SVGs, as I myself did the error of embedding SVGs as React @@ -95,3 +98,11 @@ import fileUrl from './assets/icon.svg?file' // Works like .png and other file i ### `exports` note This plugin **does not** respect the `exports` field when importing svg files from third-party packages such as `simple-icons`, which do not expose them. + +### Migrating from SVGR +This plugin can mostly be used as a drop-in replacement of SVGR; unless you're dealing with complex SVGs or need to +style/animate individual parts of the SVG, the code generated by this plugin should behave just as you're used to, +plus the [preprocessing of your SVGs](#svg-processing). + +Make sure to enable `preserveWidthHeight` for best compatibility. This option is not enabled by default as it was not +done historically by the plugin, and suddenly doing it would be a breaking change. diff --git a/package.json b/package.json index 23d42e7..7e31e50 100755 --- a/package.json +++ b/package.json @@ -1,19 +1,19 @@ { "name": "vite-plugin-magical-svg", + "license": "BSD-3-Clause", "version": "1.3.0", "description": "An all-in-one Vite plugin that magically makes working with SVGs and bundling them a breeze", - "main": "./dist/index.js", - "types": "./dist/index.d.ts", - "repository": { - "type": "git", - "url": "git+https://github.com/cyyynthia/vite-plugin-magical-svg.git" - }, - "author": "Cynthia ", - "license": "BSD-3-Clause", + "author": "Cynthia (https://cynthia.dev)", + "repository": "github:cyyynthia/vite-plugin-magical-svg", + "bugs": "https://github.com/cyyynthia/vite-plugin-magical-svg/issues", + "funding": "https://github.com/sponsors/cyyynthia", "keywords": [ "vite-plugin", "svg" ], + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "packageManager": "pnpm@9.4.0", "scripts": { "prepack": "tsc", "build": "tsc" @@ -24,7 +24,7 @@ "xml2js": "^0.6.2" }, "devDependencies": { - "@types/node": "^20.14.9", + "@types/node": "^20.14.10", "@types/xml2js": "^0.4.14", "rollup": "^2.79.1", "typescript": "^5.5.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 39325b0..eb29d9d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,8 +19,8 @@ importers: version: 0.6.2 devDependencies: '@types/node': - specifier: ^20.14.9 - version: 20.14.9 + specifier: ^20.14.10 + version: 20.14.10 '@types/xml2js': specifier: ^0.4.14 version: 0.4.14 @@ -32,7 +32,7 @@ importers: version: 5.5.3 vite: specifier: ^3.2.10 - version: 3.2.10(@types/node@20.14.9) + version: 3.2.10(@types/node@20.14.10) packages: @@ -48,15 +48,15 @@ packages: cpu: [loong64] os: [linux] - '@jridgewell/sourcemap-codec@1.4.15': - resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} + '@jridgewell/sourcemap-codec@1.5.0': + resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==} '@trysound/sax@0.2.0': resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} - '@types/node@20.14.9': - resolution: {integrity: sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==} + '@types/node@20.14.10': + resolution: {integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==} '@types/xml2js@0.4.14': resolution: {integrity: sha512-4YnrRemBShWRO2QjvUin8ESA41rH+9nQGLUGZV/1IDhi3SL9OhdpNC/MrulTWuptXKwhx/aDxE7toV0f/ypIXQ==} @@ -346,17 +346,17 @@ snapshots: '@esbuild/linux-loong64@0.15.18': optional: true - '@jridgewell/sourcemap-codec@1.4.15': {} + '@jridgewell/sourcemap-codec@1.5.0': {} '@trysound/sax@0.2.0': {} - '@types/node@20.14.9': + '@types/node@20.14.10': dependencies: undici-types: 5.26.5 '@types/xml2js@0.4.14': dependencies: - '@types/node': 20.14.9 + '@types/node': 20.14.10 boolbase@1.0.0: {} @@ -506,7 +506,7 @@ snapshots: magic-string@0.30.10: dependencies: - '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/sourcemap-codec': 1.5.0 mdn-data@2.0.28: {} @@ -558,14 +558,14 @@ snapshots: undici-types@5.26.5: {} - vite@3.2.10(@types/node@20.14.9): + vite@3.2.10(@types/node@20.14.10): dependencies: esbuild: 0.15.18 postcss: 8.4.39 resolve: 1.22.8 rollup: 2.79.1 optionalDependencies: - '@types/node': 20.14.9 + '@types/node': 20.14.10 fsevents: 2.3.3 xml2js@0.6.2: