open-index/open-npm huggingface dataset:
npm package: @svg-drawing/core
Description: svg drawing library.
Author: Kazuto Kamei
Latest version: 5.0.1-beta.0

# `@svg-drawing/core`

[![npm version](https://img.shields.io/npm/v/@svg-drawing/core/latest.svg)](https://www.npmjs.com/package/@svg-drawing/core) [![npm download](https://img.shields.io/npm/dm/@svg-drawing/core.svg)](https://www.npmjs.com/package/@svg-drawing/core)

## How to use

### npm

Install

```shell
yarn add @svg-drawing/core
# or
# npm i svg-drawing
```

Example code is [here](/examples/docs/pages/demo/drawing.tsx)

This example renders the drawing area.

```javascript
import { SvgDrawing } from '@svg-drawing/core'

const el = document.createElement('div')

// Drawing area will be resized to fit the rendering area
el.setAttribute(
  'style',
  `
  border: 1px solid #ddd;
  width: 500px;
  height: 500px;
  `
)
document.body.appendChid(el)
new SvgDrawing(el)
```

SvgDrawing methods.

```javascript
const draw = new SvgDrawing(el)

// change parameter.　There are other changeable parameters like fill, close, curve, etc.
draw.penColor = '#00b'
draw.penWidth = 10

// drawing deactivate
draw.off()
// drawing reactivate
draw.on()

// drawing all clear
draw.clear()
// undo drawing
draw.undo()

// Download image. Also available in SvgAnimation, Renderer
draw.download() // Default download is svg.
draw.download({ extension: 'jpg', filename: 'example.jpg' })
draw.download({ extension: 'png', filename: 'example.png' })

// Load svg data. Only the path element.
// SVG exported by this library can be read.
draw.svg.parseSVGString(
  '<svg width="200" height="200"><path fill="#f00" stroke="#00f" stroke-width="4" d="M 1 1 L 2 2 C 3 3 5 3 7 3 Z"></path></svg>'
)
draw.svg.parseSVGElement(document.getElementByID('loadSVG'))
```

### CDN

```html
<div id="draw-area" style="width: 100vw;height: 100vh;"></div>
<script src="https://unpkg.com/@svg-drawing/core@4.0.0-beta.6/lib/index.umd.js"></script>
<script>
  var draw = new SVGDCore.SvgDrawing(document.getElementById('draw-area'))
</script>
```

[Here](/example/html/) is an example for Html only.
npm package: @svg-drawing/img-trace
Description: svg drawing library.
Author: Kazuto Kamei
Latest version: 5.0.1-beta.0

# `@svg-drawing/img-trace`

[![npm version](https://img.shields.io/npm/v/@svg-drawing/img-trace/latest.svg)](https://www.npmjs.com/package/@svg-drawing/img-trace) [![npm download](https://img.shields.io/npm/dm/@svg-drawing/img-trace.svg)](https://www.npmjs.com/package/@svg-drawing/img-trace)

## Install

### npm

```shell
yarn add @svg-drawing/img-trace
# or
# npm i @svg-drawing/img-trace
```

## How to use

Example code is [here](/examples/docs/pages/demo/img-trace.tsx)

Example of downloading the image converted to Svg

```ts
import {
  ImgTrace
  ImgLoader,
} from '@svg-drawing/img-trace'
import { download } from '@svg-drawing/core'

const svgDownload = async () => {
  new ImgLoader().fromUrl('./images/example.png', (imgd) => {
    const svg = new ImgTrace().load(imgd)
    download(svg)
  }
}

svgDownload()
```

Example of rendering an image converted to Svg

```ts
import { Renderer } from '@svg-drawing/core'
import {
  ImgTrace
  ImgLoader,
} from '@svg-drawing/img-trace'

const handleImage = (imgd) => {
  const svg = new ImgTrace().load(imgd)
  const renderer = new Renderer(document.getElementById('render-area'))
  renderer.update(svg.toJson())
}

new ImgLoader().fromUrl('./images/example.png', handleImage)
```

Example of get colors palettes.

```ts
import {
  ImgTrace
  ImgLoader,
  Palette
} from '@svg-drawing/img-trace'
import { download } from '@svg-drawing/core'

// imgd is new ImageData()
const colorSvgDownload = () => {
  new ImgLoader().fromUrl('./images/example.png', (imgd) => {
    // extracting colors from an image.
    const palette = Palette.imageData(imgd, {
      numberOfColors: 8 // The default value.　If it is 8 or less, the value is gray scale.
    })
    // const palette = Palette.number(8) // Extracts the color evenly by the number passed
    // const palette = Palette.grey(8) // Grey scale palettes.
    
    const svg = new ImgTrace({ palettes }).load(imgd)
    download(svg)
  })
}

colorSvgDownload()

```

## Thanks

https://github.com/jankovicsandras/imagetracerjs
npm package: @svg-drawing/react
Description: React svg drawing library. This library is a React extension of svg-drawing.
Author: Kazuto Kamei
Latest version: 5.0.1-beta.0

# `@svg-drawing/react`

[![npm version](https://img.shields.io/npm/v/@svg-drawing/react/latest.svg)](https://www.npmjs.com/package/@svg-drawing/react) [![npm download](https://img.shields.io/npm/dm/@svg-drawing/react.svg)](https://www.npmjs.com/package/@svg-drawing/react)

## Get started

```shell
yarn add react @svg-drawing/react
```

## How to use

Example code is [here](/examples/demo/pages/react.tsx)

This is example.

```javascript
import React from 'react'
import { useSvgDrawing } from '@svg-drawing/react'

const Drawing = () => {
  const [renderRef, draw] = useSvgDrawing()
  // Drawing area will be resized to fit the rendering area
  return <div style={{ width: 500, height: 500 }} ref={renderRef} />
}
```

useSvgDrawing options.

```javascript
const [renderRef, draw] = useSvgDrawing({
  penWidth: 10, // pen width
  penColor: '#e00', // pen color
  close: true, // Use close command for path. Default is false.
  curve: false, // Use curve command for path. Default is true.
  delay: 60, // Set how many ms to draw points every.
  fill: '', // Set fill attribute for path. default is `none`
})
```

Drawing methods.

```javascript
// svg-drawing hooks
const [renderRef, draw] = useSvgDrawing()

// Call the SvgDrawing. Access the current settings of penWidth, penColor etc
// Details are https://github.com/kmkzt/svg-drawing/tree/master/packages/core.
const logger = useCallback(() => {
  if (!draw.ref.current) return
  console.log(draw.ref.current.penColor) // #333
  console.log(draw.ref.current.penWidth) // 1
}, [])

// Erase all drawing.
return <button onClick={draw.clear}>clear</button>
// Undo drawing.
return <button onClick={draw.undo}>undo</button>

// Download image.
const handleDownload = useCallback(() => {
  draw.download() // default svg download
  draw.download({ extension: 'svg', filename: 'a.svg'})
  draw.download({ extension: 'png', filename: 'b.png'})
  draw.download({ extension: 'jpg', filename: 'c.jpg'})
}, [draw.download])

// Chage parameter
const handleChangeParameter = useCallback(() => {
  // Change pen config
  draw.changePenColor('#00b')
  // Change pen width
  draw.changePenWidth(10)
  // Change fill attribure of svg path element.
  draw.changFill('#00b')
  // Change throttle delay of  drawing
  draw.changeDelay(10)
  // Set whether to use curved comma for svg path element.
  draw.changCurve(false)
  // Set whether to use curved comma for svg path element.
  draw.changeClose(true)
}, [draw])

// get svgXML
// return SVGElement
const loggerXML = useCallback(() => {
  console.log(draw.getSvgXML()) // <svg width="502" height="502"><path stroke-width="3" stroke="#000" fill="none" stroke-linejoin="round" stroke-linecap="round" d="M 156.671875 284.7265625 C 156.671875 286.1465625 156.671875 287.89984375 156.671875 291.83984375 ...
}, [draw.getSvgXML])
```
npm package: @svg-extract-color/svg-extract-color-loader
Description: A Webpack Loader to extract svg color
Author: lizijie123
Latest version: 1.0.3-beta

# svg-extract-color-loader

## 为什么需要 svg-extract-color

当我们使用了 SVG Sprite 时，我们希望能够通过use标签修改 SVG 的颜色。有些 SVG 可以通过为use标签传入color属性修改 SVG 颜色；有些 SVG 需要先将内部的所有fill与stroke属性删除，才能通过为use标签传入color属性修改 SVG 颜色；有些 SVG 即使将内部的所有fill与stroke属性删除，也无法通过为use标签传入color属性修改 SVG 颜色；

[上述情况示例](../../examples/svg-sprite/index.html)

## 他是如何工作的

本loader需要与svg-sprite-loader搭配使用

编译阶段会将 SVG 中的所有颜色属性值会由原颜色替换为 CSS 变量调用形式 var(--color, 原颜色属性值) 。在运行时，我们在需要修改颜色的use标签中传入 CSS 变量即可修改颜色。

```html
<!-- 单独使用 svg-sprite-loader -->
<svg>
  <use xlink:href="#icon-plus" style="color: red" />
</svg>
<!-- 使用 svg-sprite-loader & svg-extract-color-loader -->
<svg>
  <use xlink:href="#icon-plus" style="--color: red" />
</svg>
```

## 安装

```shell
npm install @svg-extract-color/svg-extract-color-loader -D
# or
yarn add @svg-extract-color/svg-extract-color-loader -D
# or
pnpm install @svg-extract-color/svg-extract-color-loader -D
```

## 如何使用

本loader需要与[svg-sprite-loader](https://github.com/JetBrains/svg-sprite-loader)搭配使用

且目前只支持修改单色 SVG

```js
{
  test: /\.svg$/,
  use: [
    'svg-sprite-loader',
    '@svg-extract-color/svg-extract-color-loader',
  ],
}
```

### cssVariableName

cssVariableName 用于设置 SVG 中使用的 CSS 变量名，这会影响use标签中传入的 CSS 变量名，默认值为: `--color`

```js
options: {
  cssVariableName: '--svg-color'
}
```

```html
<svg>
  <use xlink:href="#icon-complex" style="--svg-color: red">
</svg>
```

## 示例

请参阅[示例](../../examples/svg-extract-color-loader/README.md)
npm package: @svg-use/core
Description: Tools and bundler plugins for loading SVG images via use[href], for use in components.
Author: Fotis Papadogeorgopoulos
Latest version: 1.0.0

# `@svg-use/core`

Core utilities for transforming an SVG to make it compatible with `use[href]`
(for example ensuring an id, extracting id and viewBox, making it themeable).

Also includes utilities for creating JS modules, to facilitate bundler plugins
or more bespoke code generation.

If you want to integrate svg-use into an existing pipeline, look into
[the webpack loader](../webpack/) or [the rollup plugin](../rollup/).

If you want to transform SVG for a reusable component library (instead of an
application), or as a codegen step (instead of bundler plugins), then
[consult the reusable library example](../../examples/shared-library/)

## Quick start

```shell
pnpm add --save-dev @svg-use/core
```

Here are the basic transformations, assuming some SVG content in scope:

```tsx
import {
  transformSvgForUseHref,
  createJsModule,
  defaultGetSvgIdAttribute,
  defaultComponentFactory,
  getDefaultThemeSubstitutionFunction,
} from '@svg-use/core';

function transformAndWriteModule(content: string) {
  const transformResult = transformSvgForUseHref(content, {
    getSvgIdAttribute: defaultGetSvgIdAttribute,
    getThemeSubstitutions: getDefaultThemeSubstitutionFunction(),
  });

  if (transformResult.type === 'failure') {
    throw new Error(transformResult.error);
  }

  const {
    data: { content: transformedSvg, id, viewBox },
  } = transformResult;

  const jsModuleCode = createJsModule(
    {
      url: /* fill in an applicable URL here; depends on the context */,
      id: JSON.stringify(id),
      viewBox: JSON.stringify(viewBox),
    },
    {
      componentFactory: defaultComponentFactory,
    },
  );
}
```

## API reference

[Find the full API reference](./api-docs/README.md)
npm package: @svg-use/react
Description: Tools and bundler plugins for loading SVG images via use[href], for use in components.
Author: Fotis Papadogeorgopoulos
Latest version: 1.1.0

# `@svg-use/react`

A component for using the output of `@svg-use/core` in React, with the default
theme config. Also includes utilities for creating your own wrappers.

## Quick start

```shell
pnpm add @svg-use/react
```

```tsx
import { createThemedExternalSvg, ThemedExternalSvg } from '@svg-use/react';

// Assuming you have {url, id, viewBox} in scope, for example from a loader or a priori information

const MyIcon = createThemedExternalSvg({ url, id, viewBox });

const MyComponent = () => {
  return (
    <>
      <MyIcon />
      <ThemedExternalSvg iconUrl={url} iconId={id} viewBox={viewBox} />
    </>
  );
};
```

Optionally, in your application root, you can pass config via context:

```tsx
import { configContext, type Config } from '@svg-use/react';

const config: Config = {
  // Add any config options here
  rewritePath: (pathOrHref) => pathOrHref,
  runtimeChecksEnabled: process.env.NODE_ENV !== 'production',
};

const AppRoot = () => {
  return (
    <configContext.Provider value={config}>
      {/* The rest of your application */}
    </configContext.Provider>
  );
};
```

## API Reference

[Find the full API reference](./api-docs/README.md)
npm package: @svg-use/rollup
Description: Tools and bundler plugins for loading SVG images via use[href], for use in components.
Author: Fotis Papadogeorgopoulos
Latest version: 1.1.0

# `@svg-use/rollup`

A rollup plugin, for using SVG images via `use[href]` references. A thin wrapper
around [@svg-use/core](../core/README.md).

## Quick start

First, install the plugin, and the default React wrapper:

```shell
pnpm add --save-dev @svg-use/rollup
pnpm add @svg-use/react
```

### Configure Rollup

In your Rollup config file (`rollup.config.mjs`):

```ts
import svgUse from '@svg-use/rollup';

export default {
  plugins: [svgUse()];
}
```

### Optional: Configure TypeScript

If you are using TypeScript, you can get types for the default config by adding
the following in a `.d.ts` file in your project. For example, you can include
this in `src/client.d.ts`, or any other applicable place.

```ts
/// <reference types="@svg-use/rollup/client" />
```

#### Overriding default types

If you wish to override the default types, add a separate `.d.ts` file with your
types. Then, reference that file in `client.d.ts`, prior to the built-in types

For example, suppose you have changed the signature of the factory function.
Specify your own definitions, such as `svg-use-overrides.d.ts`:

```ts
declare module '*.svg' {
  export const Component: ReturnType<
    typeof import('./path/to/my/factory').myFactoryName
  >;
}
```

In `client.d.ts`:

```ts
/// <reference types="./svg-use-overrides.d.ts" />
/// <reference types="@svg-use/rollup/client" />
```

### Use it in your components

```tsx
import { Component as Arrow } from './arrow.svg?svgUse';
import { Component as ArrowNoTheme } from './arrow.svg?svgUse&noTheme';

const MyComponent = () => (
  <div>
    <Arrow color="currentColor" />
    <ArrowNoTheme />
  </div>
);
```

You can also create your own SVG `use[href]` wrappers, using the other named
exports. This is how the default Component factory works under the hood:

```tsx
import { url, id } from './arrow.svg?svgUse';
import { createThemedExternalSvg } from '@svg-use/react';

export const Arrow = createThemedExternalSvg({ url, id });
```

## Worked example

[Consult examples/vite-react for a worked example](/examples/vite-react/) (vite
uses rollup configuration). You can use this as a playground for understanding
the transformations, as well as the different moving parts, isolated from your
own application's configuration.

## Options

### getSvgIdAttribute?

> `optional` **getSvgIdAttribute**:
> `(info: {filename?: string; existingId?: string;}) => string`;

Specifies an id for the referenced `<svg>`, set as the `id` attribute on the
root. An id is required in order for use[href] to work. A default is provided if
this is not defined.

### Options shared with `@svg-use/core`

- [`getThemeSubstitutions`](/packages/core/api-docs/type-aliases/TransformOptions.md#getthemesubstitutions)
- [`componentFactory`](/packages/core/api-docs/interfaces/ModuleFactoryOptions.md#componentfactory)
npm package: @svg-zentrale/eslint-plugin
Description: SVG ESLint rules
Author: SVG Bundes-Zentralgenosschenschaft Straßenverkehr eG
Latest version: 0.2.4

# svg-lint-rules

This repository contains the npm package `@svg-zentrale/eslint-plugin`. With this package as eslint plugin you can use custom ESLint rules written by and for [SVG Bundes-Zentralgenossenschaft Straßenverkehr eG](https://www.svg.de/).

Currently it contains two [@ngneat/until-destroy](https://github.com/ngneat/until-destroy) related rules:

- `until-destroy-import`
  - Checks that when importing `untilDestroyed` you also import `UntilDestroy` and vice versa (using both in file)
- `until-destroyed-for-subscriptions`
  - Checks that `untilDestroyed` is used for all subscriptions in lifecycle components/directives/pipes which may be destroyed at one point

## How to use

To use the plugin install it as dev dependancy via

```shell
npm install @svg-zentrale/eslint-plugin --save-dev
```

or

```shell
yarn add @svg-zentrale/eslint-plugin --dev
```

Next add `@svg-zentrale` to the list of your plugins within your `.eslintrc.json`

So the line which might look like this

```json
"plugins": ["@typescript-eslint"],
```

becomes

```json
"plugins": ["@typescript-eslint", "@svg-zentrale"],
```

Then add the rules themselves to your `.eslintrc` rules via

```json
"@svg-zentrale/until-destroy-import": "error",
"@svg-zentrale/until-destroyed-for-subscriptions": "error"
```
npm package: @svg-zentrale/sts
Description: A TypeScript style guide based on ESlint that extends the gts rule set.
Latest version: 1.0.2

# README

A TypeScript style guide based on ESlint that extends the gts rule set.

### What is this repository for?

- sts is SVG's TypeScript style guide, and the configuration for our formatter, linter, and automatic code fixer. Wraps [gts](https://www.npmjs.com/package/gts) and overwrites if necessary rules which we consider important/unimportant for us.
- Version 1.0.1

### How do I get set up?

**Install**:

```shell
npm install @svg-zentrale/sts --save-dev
```

or

```shell
yarn add @svg-zentrale/sts --dev
```

**Edit `tslint.json`**:

```jsonc
{
  "extends": ["@svgzentrale/sts", ...],
  // ...
}
```
npm package: @svg.new/saul
Description: SVG generator agent
Latest version: 1.0.6

# Saul - SVG Generator Agent

A command-line tool that generates SVG images from natural language descriptions using Claude AI.

## Demo


https://github.com/user-attachments/assets/fbcd3979-77f3-4a51-a3eb-0c274be1d93d



## Usage

To get started run the tool using npx:

```bash
npx svg-saul
```


### Interactive Mode

Simply run:

```bash
npx svg-saul
```

You'll be prompted to:
1. Enter a description of the image you want to create
2. After generation, choose to:
   - **View SVG** - Opens the SVG in your default browser
   - **Modify SVG** - Enter a prompt to adjust the image
   - **Auto adjust** - Let AI improve the image
   - **Create new** - Generate a completely new image
   - **Exit** - Quit the application

### Piped Mode

You can also pipe descriptions directly:
```bash
echo "a red house with a blue roof" | npm start
```

In piped mode, the tool will output the paths to the generated files and exit.

## Examples

**Interactive:**
```bash
npm start
# Enter: "a minimalist mountain landscape at sunset"
```

**Piped:**
```bash
echo "a geometric logo with triangles" | npm start
```

## Development

### Setup

```bash
npm install
```

1. Create a `.env` file based on `.env.example`:
```bash
cp .env.example .env
```

2. Add your Anthropic API key to `.env`:
```
ANTHROPIC_API_KEY=your_actual_api_key_here
```

Get your API key from: https://console.anthropic.com/


### Requirements

- Node.js 18+
- An Anthropic API key

## License

MIT
npm package: @svgaplus/renderer.pixi
Description: SVGAPlus pixi.js renderer.
Author: LancerComet
Latest version: 2.0.2

# SVGAPlus PixiRenderer

You are able to use PIXI.js to render SVGA graphics.

Just doing a few steps and you are gonna be on 🔥!

> This version is for PIXI.JS v7. If you want to use v5, please install 1.x.

## Setup

1. Install PIXI.js v7 to your project:

```
npm install pixi.js --save
```

2. Install PixiRenderer:

```
npm install @svgaplus/renderer.pixi --save
```

3. Rock and roll:

```ts
import { SVGAPlus } from '@svgaplus/core'
import { PixiRenderer } from '@svgaplus/renderer.pixi' 

const player = new SVGAPlus({
  ...
  renderer: PixiRenderer
})
```

Done! Now you have everything from PIXI.js!

## Customize your PIXI Renderer

You can access all pixi stuffs from here:

```ts
const player = new SVGAPlus({
  ...
  renderer: PixiRenderer
})

player.renderer  // Pixi is so 🔥! 
```

And you might want to know:

```ts
player.renderer.pixiApp        // Pixi Application.
player.renderer.pixiContainer  // Everything has been put in this container.
```

For an example, this is the way to use pixi filters:

```ts
import { SVGAPlus } from '@svgaplus/core'
import { PixiRenderer } from '@svgaplus/renderer.pixi' 
import * as Filters from 'pixi-filters'

const player = new SVGAPlus({
  ...
  renderer: PixiRenderer
})

await player.init()

// Set your favourite filters.
// Just doing this after calling "init()".
player.renderer.pixiContainer.filters = [
  new Filters.RGBSplitFilter()
]
```

Check out [PIXI.js](https://github.com/pixijs) for more information.
npm package: @svgdotjs/svg.js
Description: A lightweight library for manipulating and animating SVG.
Author: Wout Fierens
Latest version: 3.2.5

# SVG.js

[![Build Status](https://travis-ci.org/svgdotjs/svg.js.svg?branch=master)](https://travis-ci.org/svgdotjs/svg.js)
[![Coverage Status](https://coveralls.io/repos/github/svgdotjs/svg.js/badge.svg?branch=master)](https://coveralls.io/github/svgdotjs/svg.js?branch=master)
[![Cdnjs](https://img.shields.io/cdnjs/v/svg.js.svg)](https://cdnjs.com/libraries/svg.js)
[![jsdelivr](https://badgen.net/jsdelivr/v/npm/@svgdotjs/svg.js)](https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js)
[![Join the chat at https://gitter.im/svgdotjs/svg.js](https://badges.gitter.im/svgdotjs/svg.js.svg)](https://gitter.im/svgdotjs/svg.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Twitter](https://img.shields.io/badge/Twitter-@svg__js-green.svg)](https://twitter.com/svg_js)

**A lightweight library for manipulating and animating SVG, without any dependencies.**

SVG.js is licensed under the terms of the MIT License.

## Installation

#### Npm:

`npm install @svgdotjs/svg.js`

#### Yarn:

`yarn add @svgdotjs/svg.js`

#### CDNs:

[https://cdnjs.com/libraries/svg.js](https://cdnjs.com/libraries/svg.js)  
[https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js](https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js)  
[https://unpkg.com/@svgdotjs/svg.js](https://unpkg.com/@svgdotjs/svg.js)

## Documentation

Check [svgjs.dev](https://svgjs.dev/docs/3.0/) to learn more.

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=ulima.ums%40googlemail.com&lc=US&item_name=SVG.JS&currency_code=EUR&bn=PP-DonationsBF%3Abtn_donate_74x21.png%3ANonHostedGuest) or [![Sponsor](https://img.shields.io/badge/Sponsor-svg.js-green.svg)](https://github.com/sponsors/Fuzzyma)
npm package: @svgdotjs/svg.resize.js
Description: An extension for svg.js which allows to resize elements which are selected
Author: Ulrich-Matthias Schäfer
Latest version: 2.0.5

# svg.resize.js

An extension of [svg.js](https://github.com/svgdotjs/svg.js) which allows to resize elements which are selected with [svg.select.js](https://github.com/svgdotjs/svg.select.js)

# Demo

For a demo see http://svgdotjs.github.io/svg.resize.js/

# Get Started

Install `svg.js`, `svg.select.js` and `svg.resize.js` using npm:

```bash
npm i @svgdotjs/svg.js @svgdotjs/svg.select.js @svgdotjs/svg.resize.js
```

Or get it from a cnd:

```html
<link rel="stylesheet" href="https://unpkg.com/@svgdotjs/svg.resize.js@latest/dist/svg.resize.css" />
<script src="https://unpkg.com/@svgdotjs/svg.js"></script>
<!-- the select plugin comes bundled with the resize plugin -->
<!-- <script src="https://unpkg.com/@svgdotjs/svg.select.js"></script> -->
<script src="https://unpkg.com/@svgdotjs/svg.resize.js"></script>
```

Select and resize a rectangle using this simple piece of code:

```ts
var canvas = new SVG().addTo('body').size(500, 500)
canvas.rect(50, 50).fill('red').select().resize()
```

# Usage

Activate resizing

```ts
rect.select().resize()
```

Deactivate resizing

```ts
rect.resize(false)
```

Preserve aspect ratio, resize around center and snap to grid:

```ts
rect.resize({ preserveAspectRatio: true, aroundCenter: true, grid: 10, degree: 0.1 })
```

# Options

- `preserveAspectRatio`: Preserve the aspect ratio of the element while resizing
- `aroundCenter`: Resize around the center of the element
- `grid`: Snaps the shape to a virtual grid while resizing
- `degree`: Snaps to an angle when rotating

# Events

While resizing, a `resize` event is fired. It contains the following properties (in `event.detail`):

- `box`: The resulting bounding box after the resize operation
- `angle`: The resulting rotation angle after the resize operation
- `eventType`: The type of resize operation (the event fired by the select plugin)
- `event`: The original event
- `handler`: The resize handler

```ts
rect.on('resize', (event) => {
  console.log(event.detail)
})
```

# Contributing

```bash
git clone https://github.com/svgdotjs/svg.resize.js.git
cd svg.resize.js
npm install
npm run dev
```

# Migration from svg.js v2

- The option naming changed a bit. Please double check
- The former events were removed. The resize event now serves the same purpose
npm package: @svgdotjs/svg.select.js
Description: An extension of svg.js which allows to select elements with mouse
Author: Ulrich-Matthias Schäfer
Latest version: 4.0.3

# svg.select.js

An extension of [svg.js](https://github.com/svgdotjs/svg.js) which allows to select elements with mouse

## Demo

For a demo see http://svgjs.dev/svg.resize.js/

## Get Started

- Install `svg.js` and `svg.select.js` using npm:

  ```bash
  npm i @svgdotjs/svg.js @svgdotjs/svg.select.js
  ```

- Or get it from a cnd:

  ```html
  <script src="https://unpkg.com/@svgdotjs/svg.js"></script>
  <script src="https://unpkg.com/@svgdotjs/svg.select.js"></script>
  ```

- Select a rectangle using this simple piece of code:

  ```ts
  var canvas = new SVG().addTo('body').size(500, 500)
  canvas.rect(50, 50).fill('red').select()
  ```

## Usage

Select

```ts
var canvas = SVG().addTo('body')
var rect = canvas.rect(100, 100)
var polygon = canvas.polygon([
  [100, 100],
  [200, 100],
  [200, 200],
  [100, 200],
])
rect.select()
polygon.pointSelect()

// both also works
polygon.select().pointSelect()
```

Unselect

```ts
rect.select(false)
```

## Adaptation

Sometimes, the default shape is not to your liking. Therefore, you can create your own handles by passing in a create and update function:

```ts
rect.select({
  createHandle: (group, p, index, pointArr, handleName) => group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateHandle: (group, p, index, pointArr, handleName) => group.center(p[0], p[1]),
  createRot: (group) => group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateRot: (group, rotPoint, handlePoints) => group.center(p[0], p[1]),
})

polygon.pointSelect({
  createHandle: (group, p, index, pointArr, handleName) => group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateHandle: (group, p, index, pointArr, handleName) => group.center(p[0], p[1]),
})
```

You can style the selection with the classes

- `svg_select_shape` - _normal selection_
- `svg_select_shape_pointSelection` - _point selection_
- `svg_select_handle`- _any normal selection handles_
- `svg_select_handle_lt` - _left top_
- `svg_select_handle_rt` - _right top_
- `svg_select_handle_rb` - _right bottom_
- `svg_select_handle_lb` - _left bottom_
- `svg_select_handle_t` - _top_
- `svg_select_handle_r` - _right_
- `svg_select_handle_b` - _bottom_
- `svg_select_handle_l` - _left_
- `svg_select_handle_rot` - _rotation point_
- `svg_select_handle_point` - _point select point_

## Contributing

```bash
git clone https://github.com/svgdotjs/svg.select.js.git
cd svg.select.js
npm install
npm run dev
```

## Migration from svg.js v2

- The css classes changed. In case you used your own styling, you'll need to adapt
- A lot of options got dropped in favor of the `create` and `update` functions
  - In case you want to hide certain handles, just create an element without any size and pass a noop to update
- the deepSelect option was moved to its own function and renamed to `pointSelect`
npm package: @svgdotjs/svg.topath.js
Description: An extension for svg.js to convert shapes to paths
Author: Wout Fierens
Latest version: 2.0.3

# svg.topath.js

This is a plugin for the [svg.js](https://svgdotjs.github.io/) library to convert any other shape to a path.

svg.topath.js is licensed under the terms of the MIT License.


## Install

```sh
npm install @svgdotjs/svg.topath.js
```

## Usage

Include this plugin after including svg.js in your html document
or require / import it.

To convert any other shape to a path:

```javascript
var canvas = SVG().addTo('body')

var rect = canvas.rect(100, 200).attr({ rx: 10, ry: 5 })

var rectPath = rect.toPath()
```

The newly created path will **replace** the original shape by default.
If you don't want your shape to be replaced, use `toPath(false)`.

The new path is returned and can be added to the document later:

```javascript
rect = rect.toPath(false).insertAfter(rect)
```
npm package: @svgdotjs/svg.topoly.js
Description: An extension for svg.js to convert shapes to polygons
Author: Wout Fierens
Latest version: 1.0.3

# svg.topoly.js

This is a plugin for the [SVG.js](http://svgjs.com) library to convert paths to polygons or polylines.

svg.topoly.js is licensed under the terms of the MIT License.

## Install

```sh
npm install @svgdotjs/svg.topoly.js
```

## Usage

Include this plugin after including SVG.js in your html document
or require / import it.

To convert a path to a polygon:

```javascript
const data = 'M82.3,160.4c6.5,5.2,13.6,9.5,21.2,12.8c7.6,3.3,14.7,4.9,21.5,4.9c7.3,0,12.6-1.1,15.9-3.4c3.3-2.2,4.9-5.4,4.9-9.5 c0-2.2-0.6-4.1-1.7-5.6c-1.1-1.5-2.8-2.9-4.9-4.2c-2.2-1.3-4.7-2.6-7.7-3.8c-3-1.2-6.5-2.6-10.4-4.1l-22.7-9.5 c-4.9-1.9-9.5-4.3-14-7.4c-4.5-3.1-8.4-6.7-11.8-10.9c-3.4-4.2-6-9-8-14.5c-2-5.4-2.9-11.4-2.9-18c0-7.9,1.7-15.2,5.1-22 c3.4-6.8,8-12.8,14-18c6-5.1,13.1-9.2,21.5-12.2c8.3-3,17.4-4.5,27.4-4.5c10.5,0,21.1,2,31.9,5.9c10.8,3.9,20.3,10.1,28.8,18.5 L166,85.1c-6.2-4.3-12.1-7.6-17.8-9.8c-5.7-2.2-11.9-3.4-18.7-3.4c-6,0-10.7,1-14,3.1c-3.4,2.1-5.1,5.1-5.1,9.3 c0,4.3,2.4,7.6,7.2,10c4.8,2.3,11.4,5.1,19.8,8.3l22.2,8.7c11.4,4.5,20.2,10.8,26.4,18.8c6.2,8,9.3,18.4,9.3,31.2 c0,7.7-1.6,15.1-4.8,22.2c-3.2,7.1-7.8,13.3-13.9,18.7c-6.1,5.3-13.5,9.6-22.3,12.8c-8.8,3.2-18.9,4.8-30.3,4.8 c-11.6,0-23.5-2.1-35.8-6.3c-12.3-4.2-23.3-10.8-33.3-19.8L82.3,160.4z'

const canvas = SVG().addTo('body')

var path = canvas.path(data)

var polygon = path.toPoly()
```

The newly created path will **replace** the original shape by default.
If you don't want your shape to be replaced, use `toPath(false)`.

The new path is given back and can be added to the document later:

```javascript
rect = rect.toPath(false).insertAfter(rect)
```


### Samples
The default sample value is `'1%'`. This means that every `1%` of the total length of the path, a point will be registered. Please note, that the fixpoints of the path commands are always added as extra points. This means, that `'1%'` will not always result in 100 points. Instead it will be more like `100 + number of path commands`.

There are three ways to approach the sample value.

#### `%` value
This will insert a point every `x%` of the total length.

Example:

```javascript
path.toPoly('0.5%')
```

#### `px` value
This will add points on a fixed distance until the total length is reached.

Example:

```javascript
path.toPoly('3px')
```

#### number value
This will equally spread a given amount of samples over the total length.

Example:

```javascript
path.toPoly(400)
```

### Types
If a path is closed (ending with a `z`) a `SVG.Polygon` will be generated, otherwise a `SVG.Polyline`.

### SVG.PathArray
The `toPoly()` method on a `SVG.Path` is a proxy to the same method on `SVG.PathArray`. This makes it possible to convert path data to point data, even without ever drawing a shape:

```javascript
var pathArray = new SVG.PathArray(data)

var pointArray = path.toPoly('1%')
// -> returns an instance of SVG.PointArray
```
npm package: @svgenio/cli
Description: CLI tool for SVG to React component conversion
Author: Ibuchukwu Umeano
Latest version: 1.0.1

# @svgenio/cli

Command-line tool for converting SVG files to React components with TypeScript support.

## Installation

```bash
npm install -g @svgenio/cli
```

## Usage

### Convert a single SVG file

```bash
svgenio convert path/to/icon.svg
```

**Options:**
- `-o, --output <path>`: Specify output file path
- `-t, --typescript`: Generate TypeScript component (default: true)
- `-n, --name <name>`: Custom component name

**Examples:**
```bash
# Basic conversion
svgenio convert icon.svg

# Custom output path and name
svgenio convert icon.svg -o src/components/MyIcon.tsx -n MyIcon

# Generate JavaScript component
svgenio convert icon.svg --typescript false
```

### Batch process multiple SVG files

```bash
svgenio batch path/to/svg/folder
```

**Options:**
- `-o, --output <folder>`: Output folder (default: "./output")
- `-t, --typescript`: Generate TypeScript components (default: true)
- `-b, --barrel`: Generate barrel file (index.ts) (default: false)

**Examples:**
```bash
# Basic batch conversion
svgenio batch icons/

# Custom output folder with barrel file
svgenio batch icons/ -o src/components/icons --barrel

# Generate JavaScript components
svgenio batch icons/ --typescript false
```

## Features

- 🎯 **Single SVG Conversion**: Convert individual SVG files to React components
- 📁 **Batch Processing**: Process entire folders of SVG files at once
- 🔧 **TypeScript Support**: Generate TypeScript components with proper type definitions
- 📦 **Barrel Exports**: Automatically generate index files for easy imports
- 🎨 **React Optimized**: Transform SVG attributes for React compatibility (e.g., `class` → `className`)
- 🚀 **User-Friendly**: Detailed error messages and helpful feedback

## Error Handling

The CLI provides detailed error messages for common issues:

- File not found
- Invalid file type (non-SVG files)
- Empty SVG files
- Folder not found
- No SVG files in folder

## Examples

### Convert a single icon
```bash
svgenio convert icon.svg -o src/components/Icon.tsx -n Icon
# ✅ Converted: src/components/Icon.tsx
# 📝 Component name: Icon
```

### Batch convert with barrel file
```bash
svgenio batch icons/ -o src/components/icons --barrel
# ✅ Batch conversion complete: src/components/icons
# 📦 Barrel file generated: src/components/icons/index.ts
```

## Related

- [`@svgenio/core`](../core) - Core library for programmatic usage

## License

MIT - see [LICENSE](../../LICENSE) file for details.
npm package: @svgenio/core
Description: Core SVG to React component conversion library
Author: Ibuchukwu Umeano
Latest version: 1.0.1

# @svgenio/core

Core SVG to React component conversion library for Node.js and browser environments.

## Installation

```bash
npm install @svgenio/core
```

## Usage

### Basic Conversion

```typescript
import { svgenio } from '@svgenio/core';

// Convert a single SVG file
const result = svgenio.convert('path/to/icon.svg', {
  typescript: true,
  componentName: 'MyIcon'
});

console.log(result.componentName); // 'MyIcon'
console.log(result.code); // Generated React component code
```

### Batch Processing

```typescript
import { svgenio } from '@svgenio/core';

// Process multiple SVG files
svgenio.batch('path/to/svg/folder', {
  typescript: true,
  outDir: './output',
  barrelFile: true
});
```

## API Reference

### `convert(filePath: string, options?: ConvertOptions)`

Converts a single SVG file to a React component.

**Parameters:**
- `filePath`: Path to the SVG file
- `options`: Conversion options
  - `typescript?: boolean`: Generate TypeScript component (default: true)
  - `componentName?: string`: Custom component name

**Returns:**
- `componentName`: The generated component name
- `code`: The generated React component code

### `batch(folderPath: string, options?: BatchOptions)`

Processes multiple SVG files in a folder.

**Parameters:**
- `folderPath`: Path to the folder containing SVG files
- `options`: Batch processing options
  - `typescript?: boolean`: Generate TypeScript components (default: true)
  - `outDir?: string`: Output directory (default: same as input folder)
  - `barrelFile?: boolean`: Generate barrel file (default: false)

## Features

- 🎯 **Single SVG Conversion**: Convert individual SVG files to React components
- 📁 **Batch Processing**: Process entire folders of SVG files at once
- 🔧 **TypeScript Support**: Generate TypeScript components with proper type definitions
- 📦 **Barrel Exports**: Automatically generate index files for easy imports
- 🎨 **React Optimized**: Transform SVG attributes for React compatibility (e.g., `class` → `className`)

## Error Handling

The library provides detailed error messages for common issues:

- File not found
- Invalid file type (non-SVG files)
- Empty SVG files
- Folder not found
- No SVG files in folder

## License

MIT - see [LICENSE](../../LICENSE) file for details.
npm package: @svgflex/angular
Description: Angular library for SVG icons with easy color and size customization
Author: Kosuke Shimizu
Latest version: 0.2.1

# @svgflex/angular

SVG icons with easy color and size customization for Angular.

## Features

- Easy color and size customization using `currentColor`
- Support for inline SVG (full style control) or external references
- TypeScript support with full type definitions
- Flexible sizing: numbers (px), strings with units, or width/height objects
- SCSS/CSS class support
- Accessibility features (ARIA labels)

## Installation

```bash
npm install @svgflex/angular
```

## Usage

### Basic Usage

```typescript
import { Component } from '@angular/core';
import { SvgflexComponent } from '@svgflex/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SvgflexComponent],
  template: `
    <svgflex src="assets/icons/home.svg"></svgflex>
  `
})
export class AppComponent {}
```

### With Color and Size

```html
<!-- Using currentColor (inherits from parent text color) -->
<svgflex src="assets/icons/home.svg" color="currentColor" size="24"></svgflex>

<!-- Custom color -->
<svgflex src="assets/icons/star.svg" color="#ff0000" size="32"></svgflex>

<!-- Size with units -->
<svgflex src="assets/icons/user.svg" color="blue" size="2rem"></svgflex>

<!-- Different width and height -->
<svgflex
  src="assets/icons/logo.svg"
  [size]="{width: '100px', height: '50px'}"
></svgflex>
```

### With CSS Classes

```html
<svgflex
  src="assets/icons/heart.svg"
  class="icon-large text-red"
></svgflex>
```

```scss
.icon-large {
  width: 48px;
  height: 48px;
}

.text-red {
  color: red;
}
```

### Accessibility

```html
<svgflex
  src="assets/icons/close.svg"
  ariaLabel="Close dialog"
></svgflex>
```

## API

### Inputs

| Input | Type | Default | Description |
|-------|------|---------|-------------|
| `src` | `string` | *required* | Path or URL to the SVG file |
| `color` | `string` | `'currentColor'` | CSS color value |
| `size` | `number \| string \| {width, height}` | `24` | Size in px, or with units, or object |
| `class` | `string` | `''` | Additional CSS classes |
| `ariaLabel` | `string` | `undefined` | Accessibility label |
| `inline` | `boolean` | `true` | Whether to inline SVG content |

## License

MIT
npm package: @svgflex/core
Description: Framework-agnostic core utilities for SVGFlex
Author: Kosuke Shimizu
Latest version: 0.2.1

# @svgflex/core

Framework-agnostic core library for SVGFlex. This package contains shared types, utilities, and sanitization logic used across all SVGFlex framework implementations.

## Overview

This package is intended to be used by framework-specific implementations (e.g., `@svgflex/angular`, `@svgflex/react`, `@svgflex/vue`) and is not typically installed directly by end users.

## Features

- Framework-agnostic type definitions
- SVG sanitization utilities (removes scripts and event handlers)
- Automatic color replacement for hardcoded SVG colors
- Configuration processors for size and color handling
- Shared utilities for SVG manipulation

## Exports

### Types

```typescript
import type {
  SvgFlexConfig,
  SvgSize,
  SvgColor,
  SizeConfig
} from '@svgflex/core';
```

### Utilities

```typescript
import {
  processSvgConfig,
  sanitizeSvg
} from '@svgflex/core';
```

## API

### `processSvgConfig(config: SvgFlexConfig)`

Processes SVG configuration and returns normalized size and color values.

**Parameters:**
- `config.size` - Size value (number, string, or {width, height} object)
- `config.color` - Color value (CSS color string)

**Returns:**
```typescript
{
  width: string | null;
  height: string | null;
  color: string;
}
```

### `sanitizeSvg(svgContent: string, replaceColors?: boolean): string`

Sanitizes SVG content by removing potentially dangerous elements and attributes. Optionally replaces hardcoded colors with `currentColor` to enable dynamic color control.

**Parameters:**
- `svgContent` - Raw SVG string
- `replaceColors` - Whether to replace hardcoded colors with `currentColor` (default: `false`)

**Returns:**
- Sanitized SVG string with scripts and event handlers removed, and optionally with colors replaced

**Example:**
```typescript
// Basic sanitization
const safeSvg = sanitizeSvg(rawSvgContent);

// Sanitization with color replacement
const safeSvgWithColors = sanitizeSvg(rawSvgContent, true);
// This will convert fill="#4E7079" to fill="currentColor"
```

### `replaceColorsWithCurrentColor(svgContent: string): string`

Replaces all hardcoded colors in SVG attributes (`fill` and `stroke`) with `currentColor`, while preserving `none`, `transparent`, `currentColor`, and `url()` references.

**Parameters:**
- `svgContent` - SVG string with hardcoded colors

**Returns:**
- SVG string with colors replaced by `currentColor`

**Example:**
```typescript
const svgWithHardcodedColor = '<svg><path fill="#FF0000" stroke="blue" /></svg>';
const svgWithCurrentColor = replaceColorsWithCurrentColor(svgWithHardcodedColor);
// Result: '<svg><path fill="currentColor" stroke="currentColor" /></svg>'
```

## Usage in Framework Implementations

```typescript
import { sanitizeSvg, processSvgConfig } from '@svgflex/core';

// Sanitize SVG content
const safeSvg = sanitizeSvg(rawSvgContent);

// Process configuration
const { width, height, color } = processSvgConfig({
  size: '24px',
  color: 'currentColor'
});
```

## License

MIT