Socket
Socket
Sign inDemoInstall

vite-plugin-svgr-component

Package Overview
Dependencies
227
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.9.0 to 1.0.0

client.d.ts
LICENSE

2

lib/index.d.ts
export { svgrComponent, svgrComponent as default } from './src';
export type { SvgrOpts, SvgrPluginOptions } from './src';
export type { SvgrPluginOptions, SvgrOptions } from './src';

7

lib/index.js

@@ -1,1 +0,6 @@

export { svgrComponent, svgrComponent as default } from './src';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = exports.svgrComponent = void 0;
var src_1 = require("./src");
Object.defineProperty(exports, "svgrComponent", { enumerable: true, get: function () { return src_1.svgrComponent; } });
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return src_1.svgrComponent; } });

93

lib/src/index.d.ts

@@ -1,90 +0,3 @@

export declare type TemplateOptions = SvgrOpts;
export interface TemplateData {
imports?: string[];
interfaces?: string[];
componentName?: string;
props?: string[];
jsx?: string;
exports?: string[];
}
export declare type TemplateFunc = (templateOptions: {
template: unknown;
}, opts: TemplateOptions, data: TemplateData) => string;
export interface SvgrOpts {
/** Specify a custom config file. */
configFile?: string;
/** Replace SVG width and height with 1em to make SVG inherit text size. */
icon?: boolean;
/** Custom extension for generated files (default "js"). */
ext?: string;
/** Modify all SVG nodes with uppercase and use react-native-svg template. */
native?: boolean | {
expo: boolean;
};
/** Generate .tsx files with TypeScript bindings. */
typescript?: boolean;
/** Keep width and height attributes from the root SVG tag. */
dimensions?: boolean;
/** Forward all properties on the React component to the SVG tag. */
expandProps?: 'start' | 'end' | false;
/** Use Prettier to format JavaScript code output. */
prettier?: boolean;
/** Specify prettier config. */
prettierConfig?: Record<string, unknown>;
/** Use SVGO to optimize SVG code before transforming into a React component. Default: true. */
svgo?: boolean;
/** Specify SVGO config. https://gist.github.com/pladaria/69321af86ce165c2c1fc1c718b098dd0 */
svgoConfig?: Record<string, unknown>;
/** Forward the ref to the root SVG tag if true. */
ref?: boolean;
/** Wrap the exported component in React.memo if true. */
memo?: boolean;
/**
* Replace an attribute value by another. Intended for changing an Icon
* color to currentColor to inherit from text color.
*
* Specify dynamic property using curly braces: { '#000': "{props.color}" }
*/
replaceAttrValues?: Record<string, string>;
/**
* Add props to the SVG tag.
*
* Specify dynamic property using curly braces: { focusable: "{true}" }.
* Particularly useful with a custom template.
*/
svgProps?: Record<string, string>;
/**
* Add title tag via title property. If titleProp is set to true and no
* title is provided (title={undefined}) at render time, this will fallback
* to an existing title element in the svg if it exists.
*/
titleProp?: boolean;
/**
* Specify a template file (CLI) or a template function (API) to use.
* For an example of template, see the default one.
* https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/index.js
*/
template?: TemplateFunc;
/** Output files into a directory. */
outDir?: string;
/**
* Specify a template function (API) to change default index.js output
* (when --out-dir is used).
*
* https://github.com/gregberge/svgr/blob/main/packages/cli/src/dirCommand.js#L39
*/
indexTemplate?: (filePaths: string[]) => string;
/** When used with --out-dir, it ignores already existing files. */
ignoreExisting?: boolean;
/**
* Specify a custom filename case. Possible values: pascal for PascalCase,
* kebab for kebab-case or camel for camelCase.
*/
filenameCase?: 'kebab' | 'camel' | 'pascal';
/**
* By default @svgr/core doesn't include svgo and prettier plugins,
* if you want them, you have to install them and include them in config.
*/
plugins?: string[];
}
import type { Config } from '@svgr/core/dist';
export declare type SvgrOptions = Config;
export interface SvgrPluginOptions {

@@ -99,3 +12,3 @@ /**

*/
svgrOptions: SvgrOpts;
svgrOptions: SvgrOptions;
/**

@@ -102,0 +15,0 @@ * Generates component as a typescript component and

6

lib/src/index.js

@@ -1,1 +0,5 @@

export { svgrComponent } from './plugin';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.svgrComponent = void 0;
var plugin_1 = require("./plugin");
Object.defineProperty(exports, "svgrComponent", { enumerable: true, get: function () { return plugin_1.svgrComponent; } });

2

lib/src/plugin.d.ts

@@ -6,2 +6,2 @@ import type { PluginOption } from 'vite';

*/
export declare function svgrComponent({ importStringPattern, svgrOptions, typescript, keepEmittedAssets, }: SvgrPluginOptions): PluginOption;
export declare function svgrComponent({ importStringPattern, svgrOptions, typescript, keepEmittedAssets, }?: Partial<SvgrPluginOptions> | undefined): PluginOption;

148

lib/src/plugin.js

@@ -1,7 +0,60 @@

import fs from 'fs';
import svgr from '@svgr/core';
import m from 'micromatch';
import { transform } from 'esbuild';
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.svgrComponent = void 0;
var fs_1 = __importDefault(require("fs"));
var core_1 = require("@svgr/core");
var micromatch_1 = __importDefault(require("micromatch"));
var esbuild_1 = require("esbuild");
/** Default optimized configuration */
const DEFAULT_SVGR_OPTIONS = {
var DEFAULT_SVGR_OPTIONS = {
memo: true,

@@ -11,9 +64,13 @@ typescript: true,

titleProp: true,
exportType: 'default',
};
/** Remove './' in import url to match properly with micromatch */
var format = function (str) { return str.replace(/^\.\//, ''); };
/**
* =========================== MAIN PLUGIN FUNCTION =============================================
*/
export function svgrComponent({ importStringPattern = '*.svg*', svgrOptions = DEFAULT_SVGR_OPTIONS, typescript = true, keepEmittedAssets = false, }) {
const transformedSvgsCache = new Map();
const transformLoader = typescript ? 'tsx' : 'jsx';
function svgrComponent(_a) {
var _b = _a === void 0 ? {} : _a, _c = _b.importStringPattern, importStringPattern = _c === void 0 ? '**/*.svg' : _c, _d = _b.svgrOptions, svgrOptions = _d === void 0 ? DEFAULT_SVGR_OPTIONS : _d, _e = _b.typescript, typescript = _e === void 0 ? true : _e, _f = _b.keepEmittedAssets, keepEmittedAssets = _f === void 0 ? false : _f;
var transformedSvgsCache = new Map();
var transformLoader = typescript ? 'tsx' : 'jsx';
return {

@@ -23,22 +80,27 @@ // Ensure process the svg before vite auto process it as a data URI

name: 'vite:svgr-component',
async transform(_, svgImportString) {
/** -------------------- Guards ------------------------------------------------- */
const isValidSvg = svgImportString.includes('.svg')
&& m.isMatch(svgImportString, importStringPattern);
if (!isValidSvg)
return null;
const transformedSvg = transformedSvgsCache.get(svgImportString);
const isAlreadyTransformed = typeof transformedSvg !== 'undefined';
if (isAlreadyTransformed)
return transformedSvg;
/** ------------------ [end] Guards -------------------------------------------- */
const svgrComponentOptions = {
...DEFAULT_SVGR_OPTIONS,
...(svgrOptions || {}),
};
const code = await compileSvg({ svgImportString, svgrComponentOptions, transformLoader });
transformedSvgsCache.set(svgImportString, code);
return code;
transform: function (_, svgImportString) {
return __awaiter(this, void 0, void 0, function () {
var isValidSvg, transformedSvg, isAlreadyTransformed, svgrComponentOptions, code;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
isValidSvg = svgImportString.includes('.svg')
&& micromatch_1.default.isMatch(svgImportString, importStringPattern, { format: format });
if (!isValidSvg)
return [2 /*return*/, null];
transformedSvg = transformedSvgsCache.get(svgImportString);
isAlreadyTransformed = typeof transformedSvg !== 'undefined';
if (isAlreadyTransformed)
return [2 /*return*/, transformedSvg];
svgrComponentOptions = __assign(__assign({}, DEFAULT_SVGR_OPTIONS), (svgrOptions || {}));
return [4 /*yield*/, compileSvg({ svgImportString: svgImportString, svgrComponentOptions: svgrComponentOptions, transformLoader: transformLoader })];
case 1:
code = _a.sent();
transformedSvgsCache.set(svgImportString, code);
return [2 /*return*/, code];
}
});
});
},
generateBundle(_config, bundle) {
generateBundle: function (_config, bundle) {
if (keepEmittedAssets) {

@@ -48,5 +110,6 @@ return;

// Discard transformed SVG assets from bundle so they are not emitted
for (const [key, bundleEntry] of Object.entries(bundle)) {
const { type, name } = bundleEntry;
const isSvgTransformed = type === 'asset'
for (var _i = 0, _a = Object.entries(bundle); _i < _a.length; _i++) {
var _b = _a[_i], key = _b[0], bundleEntry = _b[1];
var type = bundleEntry.type, name = bundleEntry.name;
var isSvgTransformed = type === 'asset'
&& name

@@ -62,2 +125,3 @@ && name.endsWith('.svg')

}
exports.svgrComponent = svgrComponent;
/**

@@ -72,7 +136,21 @@ * @description Compiles the SVG to a React component

*/
async function compileSvg({ svgImportString, svgrComponentOptions, transformLoader, }) {
const svgFileContent = await fs.promises.readFile(svgImportString, 'utf8');
const componentCode = await svgr(svgFileContent, svgrComponentOptions);
const { code } = await transform(componentCode, { loader: transformLoader });
return { code, map: null };
function compileSvg(_a) {
var svgImportString = _a.svgImportString, svgrComponentOptions = _a.svgrComponentOptions, transformLoader = _a.transformLoader;
return __awaiter(this, void 0, void 0, function () {
var svgFileContent, componentCode, code;
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, fs_1.default.promises.readFile(svgImportString, 'utf8')];
case 1:
svgFileContent = _b.sent();
return [4 /*yield*/, (0, core_1.transform)(svgFileContent, svgrComponentOptions)];
case 2:
componentCode = _b.sent();
return [4 /*yield*/, (0, esbuild_1.transform)(componentCode, { loader: transformLoader })];
case 3:
code = (_b.sent()).code;
return [2 /*return*/, { code: code, map: null }];
}
});
});
}

20

package.json
{
"name": "vite-plugin-svgr-component",
"version": "0.9.0",
"version": "1.0.0",
"description": "⚛️ Vite zero-config customizable plugin to import SVG and transform it to a React component in a simple way",

@@ -8,7 +8,9 @@ "main": "lib/index.js",

"files": [
"lib"
"lib",
"client.d.ts"
],
"scripts": {
"build": "rm -rf lib && tsc",
"prepublish": "npm run build"
"prepublish": "npm run build",
"prepack": "npm run build"
},

@@ -28,14 +30,14 @@ "repository": {

"@types/micromatch": "^4.0.2",
"@types/node": "16.11.2",
"typescript": "4.4.4",
"vite": "2.6.10"
"@types/node": "17.0.16",
"typescript": "4.5.5",
"vite": "2.7.13"
},
"dependencies": {
"@svgr/core": "5.5.0",
"@svgr/core": "6.2.1",
"micromatch": "4.0.4"
},
"peerDependencies": {
"react": ">= 17.0.0",
"vite": "^2.0.0"
"react": "17.0.2",
"vite": "^2.7.13"
}
}

12

README.md
# Vite svgr component plugin
Vite zero-config customizable plugin to import SVG and transform it to a React component in a simple way.
<img src="https://img.shields.io/npm/v/vite-plugin-svgr-component?style=for-the-badge" />
> Vite zero-config customizable plugin to import SVG and transform it to a React component in a simple way.
## 🚀 Features

@@ -92,4 +95,11 @@ - 👌 **Zero-config**: built-in default configs for common use cases

## Use with Typescript
If you use the plugin in a Typescript project you will `need the reference to the type definitions` to allow to use "title" and "titleId" in your SVGComponent
```ts
/* vite-env.d.ts (file) */
/// <reference types="vite-plugin-svgr-component/client" />
```
## 🔑 Full config

@@ -96,0 +106,0 @@ Check out the type declaration [src/index.ts](https://github.com/chempogonzalez/vite-plugin-svgr-component/blob/main/src/index.ts#L95-L118) with all the related types

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc