open-index/open-npm huggingface dataset:
npm package: @svgr-iconkit/weather-icons
Description: Weather Icons for @svgr-iconkit
Latest version: 0.5.0-beta.1

# `@svgr-iconkit/weather-icons`

Weather Icons

## Usage

### React Web

```javascript
import Icon from '@svgr-iconkit/weather-icons';

export default function App() {
  return <div><Icon name="arrow-left" /></div>
}

```

### React Native

```javascript
import { View } from "react-native";
import Icon from '@svgr-iconkit/weather-icons';

export default function App() {
  return <View><Icon name="arrow-left" /></View>
}

```
npm package: @svgr-iconkit/xnix
Description: Xnix icons for @svgr-iconkit
Latest version: 0.5.0-beta.1

# `@svgr-iconkit/xnix`

Icons re-exported by [Akshay Syal's Xnix Icons](https://syaluiux.gumroad.com/l/Xnix500).

Full details please check on website https://svgr-iconkit.dev/explorer/xnix.

## Usage

### React Web

```javascript
import Icon from '@svgr-iconkit/xnix';

export default function App() {
  return <div><Icon name="hand-open" /></div>
}

```

### React Native

```javascript
import { View } from "react-native";
import Icon from '@svgr-iconkit/xnix';

export default function App() {
  return <View><Icon name="hand-open" /></View>
}

```
npm package: @svgr-rs/core
Description: <h1 align="center">SVGR RS</h1>
Author: SyMind
Latest version: 0.0.13

<h1 align="center">SVGR RS</h1>

<p align="center">Speedy SVGR rewritten in Rust 🦀</p>

If you are using SVGR RS from Rust, see [rustdoc](https://docs.rs/svgr-rs/0.1.2/svgr_rs/) and for most uses.

# Webpack

SVGR RS provides an [webpack](https://webpack.js.org/) loader to import SVG as React components.

## Install

```sh
npm install --save-dev @svgr-rs/svgrs-plugin
# or use yarn
yarn add --dev @svgr-rs/core
```

## Usage

webpack.config.js

```js
{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  resourceQuery: /react/,
  use: [
    {
      loader: '@svgr-rs/svgrs-plugin/webpack',
      options: {
        exportType: 'named',
        namedExport: 'ReactComponent',
      },
    },
  ],
}
```

# Vite

SVGR RS provides an [vite](https://vitejs.dev/) plugin to import SVG as React components.

## Install

```sh
npm install --save-dev @svgr-rs/svgrs-plugin
# or use yarn
yarn add --dev @svgr-rs/core
```

## Usage

vite.config.js

```js
import react from '@vitejs/plugin-react'
import { svgrs } from '@svgr-rs/svgrs-plugin/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    react(),
    svgrs({
      exportType: 'named',
      namedExport: 'ReactComponent',
    })
  ],
})
```

# Node.js

Use SVGR RS in Node.js to complex transformations or tools.

## Install

```sh
npm install --save-dev @svgr-rs/core
# or use yarn
yarn add --dev @svgr-rs/core
```

## Usage

Import `transform` from `@svgr-rs/core` to transform a file. It takes three arguments:

* `source`: the SVG source code to transform
* `options`: the options used to transform the SVG
* `state`: a state linked to the transformation

```js
import { transform } from '@svgr-rs/core'

const svgCode = `
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="10" y="10" height="100" width="100"
    style="stroke:#ff0000; fill: #0000ff"/>
</svg>
`

const jsCode = await transform(
  svgCode,
  { icon: true },
  { componentName: 'MyComponent' },
)
```

# Benchmarks

Transform time without SVGO and Prettier in W3C SVG 1.1 TestSuite:

![Transform time](./snapshots/transform-time.png)

# Roadmap

- [x] jsxRuntime
- [x] jsxRuntimeImport
- [x] icon
- [x] native
- [x] typescript
- [x] dimensions
- [x] expandProps
- [ ] prettier
- [ ] prettierConfig
- [ ] svgo ([Speedy SVGO rewritten in Rust](https://github.com/svg-rust/svgo-rs) is working in progress)
- [ ] svgoConfig
- [x] ref
- [x] memo
- [x] replaceAttrValues
- [x] svgProps
- [x] titleProp
- [x] descProp

# License

[MIT](./LICENSE)
npm package: @svgr-rs/core-linux-x64-gnu
Description: This is the **x86_64-unknown-linux-gnu** binary for `@svgr-rs/core`
Latest version: 0.0.13

# `@svgr-rs/linux-x64-gnu`

This is the **x86_64-unknown-linux-gnu** binary for `@svgr-rs/core`
npm package: @svgr-rs/core-win32-arm64-msvc
Description: This is the **aarch64-pc-windows-msvc** binary for `@svgr-rs/core`
Latest version: 0.0.13

# `@svgr-rs/core-win32-arm64-msvc`

This is the **aarch64-pc-windows-msvc** binary for `@svgr-rs/core`
npm package: @svgr-rs/core-win32-x64-msvc
Description: This is the **x86_64-pc-windows-msvc** binary for `@svgr-rs/core`
Latest version: 0.0.13

# `@svgr-rs/core-win32-x64-msvc`

This is the **x86_64-pc-windows-msvc** binary for `@svgr-rs/core`
npm package: @svgr-rs/svgrs-plugin
Description: Use svgr-rs with vite and webpack
Author: JW
Latest version: 0.2.0

# svgrs-plugin

[![npm](https://img.shields.io/npm/v/@svgr-rs/svgrs-plugin)](https://github.com/svg-rust/svgrs-plugin) [![GitHub](https://img.shields.io/npm/l/@svgr-rs/svgrs-plugin)](https://github.com/svg-rust/svgrs-plugin)

Use [svgr-rs](https://github.com/svg-rust/svgr-rs) with vite and webpack.

## install

```console
pnpm i @svgr-rs/svgrs-plugin -D
```

## options

> [!NOTE]  
Common options, both work with `vite` and `webpack`. Check more supported options from [svg-rust/svgr-rs](https://github.com/svg-rust/svgr-rs). 

**Extra options for plugins:**

`svgoImplementation`

> [!NOTE]  
Use different version `svgo` to optimize svg. Only work when `options.svgo` is enabled.

- type check below example code for details

```ts
import Svgo from 'svgo'

function getInfo(state: { filePath?: string }) {
  return state.filePath
    ? {
        input: 'file',
        path: state.filePath,
      }
    : {
        input: 'string',
      }
}

export const svgo = () => {
  let svgo: any
  return {
    async optimize(code: string, { path, ...config }: any) {
      if (!svgo) {
        svgo = new Svgo(config)
      }
      return svgo.optimize(code, getInfo({ filePath: path }))
    },
  }
}

// example for webpack config
{
  loader: require.resolve('@svgr-rs/svgrs-plugin/webpack'),
  options: {
    ref: true,
    exportType: 'default',
    jsxRuntime: 'automatic',
    icon: false,
    svgo: true,
    svgoImplementation: svgo(),
    svgoConfig: {
      plugins: [
        { prefixIds: true },
        { removeDimensions: false },
        { removeViewBox: true },
      ],
    },
  },
},
```


`svgoConfig`

- type check `svgo` config for more details


## usage

### `vite`

```ts
import path from 'node:path'

import react from '@vitejs/plugin-react'
import { svgrs } from '@svgr-rs/svgrs-plugin/vite'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgrs({
      exportType: 'named',
      namedExport: 'ReactComponent',
    })
  ],
})
```

#### `options`

Check supported options from [svg-rust/svgr-rs](https://github.com/svg-rust/svgr-rs). 

**Extra options for vite:**

`include`

- type `string[]`
- default `['**/*.svg']`

`exclude`

- type `string[]`
- default `[]`

### `webpack`

Add the following `module rule` to your `webpack.config`

```ts
{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  resourceQuery: /react/,
  use: [
    {
      loader: 'esbuild-loader',
      options: {
        loader: 'tsx',
        target: 'es2015',
      },
    },
    {
      loader: '@svgr-rs/svgrs-plugin/webpack',
      options: {
        exportType: 'named',
        namedExport: 'ReactComponent',
      },
    },
  ],
}
```

Check supported options from [svg-rust/svgr-rs](https://github.com/svg-rust/svgr-rs). 

## development

- **Setup** - `pnpm i`
- **Build** - `pnpm build`

# 
<div align='right'>

*built with ❤️ by 😼*

</div>
npm package: @svgr/babel-plugin-add-jsx-attribute
Description: Add JSX attribute
Author: Greg Bergé
Latest version: 8.0.0

# @svgr/babel-plugin-add-jsx-attribute

## Install

```
npm install --save-dev @svgr/babel-plugin-add-jsx-attribute
```

## Usage

**.babelrc**

```json
{
  "plugins": [
    [
      "@svgr/babel-plugin-add-jsx-attribute",
      {
        "elements": ["svg"],
        "attributes": [
          {
            "name": "width",
            "value": "200",
            "spread": false,
            "literal": false,
            "position": "end"
          }
        ]
      }
    ]
  ]
}
```

## License

MIT
npm package: @svgr/babel-plugin-remove-jsx-attribute
Description: Remove JSX attribute
Author: Greg Bergé
Latest version: 8.0.0

# @svgr/babel-plugin-remove-jsx-attribute

## Install

```
npm install --save-dev @svgr/babel-plugin-remove-jsx-attribute
```

## Usage

**.babelrc**

```json
{
  "plugins": [
    [
      "@svgr/babel-plugin-remove-jsx-attribute",
      {
        "elements": ["svg"],
        "attributes": ["width", "height"]
      }
    ]
  ]
}
```

## License

MIT
npm package: @svgr/babel-plugin-remove-jsx-empty-expression
Description: Remove JSX empty expression
Author: Greg Bergé
Latest version: 8.0.0

# @svgr/babel-plugin-remove-jsx-empty-expression

## Install

```
npm install --save-dev @svgr/babel-plugin-remove-jsx-empty-expression
```

## Usage

**.babelrc**

```json
{
  "plugins": ["@svgr/babel-plugin-remove-jsx-empty-expression"]
}
```

## License

MIT
npm package: @svgr/babel-plugin-replace-jsx-attribute-value
Description: Replace JSX attribute value
Author: Greg Bergé
Latest version: 8.0.0

# @svgr/babel-plugin-replace-jsx-attribute-value

## Install

```
npm install --save-dev @svgr/babel-plugin-replace-jsx-attribute-value
```

## Usage

**.babelrc**

```json
{
  "plugins": [
    [
      "@svgr/babel-plugin-replace-jsx-attribute-value",
      {
        "values": [
          { "value": "#000", "newValue": "#fff" },
          { "value": "blue", "newValue": "props.color", "literal": true }
        ]
      }
    ]
  ]
}
```

## License

MIT
npm package: @svgr/babel-plugin-svg-dynamic-title
Description: Transform SVG by adding a dynamic title element
Author: Greg Bergé
Latest version: 8.0.0

# @svgr/babel-plugin-svg-dynamic-title

## Install

```
npm install --save-dev @svgr/babel-plugin-svg-dynamic-title
```

## Usage

**.babelrc**

```json
{
  "plugins": ["@svgr/babel-plugin-svg-dynamic-title"]
}
```

## Note

This plugin handles both the titleProp and descProp options. By default, it will handle titleProp only.

## License

MIT
npm package: @svgr/babel-plugin-svg-em-dimensions
Description: Transform SVG to use em-based dimensions
Author: Greg Bergé
Latest version: 8.0.0

# @svgr/babel-plugin-svg-em-dimensions

## Install

```
npm install --save-dev @svgr/babel-plugin-svg-em-dimensions
```

## Usage

**.babelrc**

```json
{
  "plugins": [
    ["@svgr/babel-plugin-svg-em-dimensions", { "width": 24, "height": 24 }]
  ]
}
```

## License

MIT
npm package: @svgr/babel-plugin-transform-react-native-svg
Description: Transform DOM elements into react-native-svg components
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/babel-plugin-transform-react-native-svg

## Install

```
npm install --save-dev @svgr/babel-plugin-transform-react-native-svg
```

## Usage

**.babelrc**

```json
{
  "plugins": ["@svgr/babel-plugin-transform-react-native-svg"]
}
```

## License

MIT
npm package: @svgr/babel-plugin-transform-svg-component
Description: Transform SVG into component
Author: Greg Bergé
Latest version: 8.0.0

# @svgr/babel-plugin-transform-svg-component

## Install

```
npm install --save-dev @svgr/babel-plugin-transform-svg-component
```

## Usage

**.babelrc**

```json
{
  "plugins": [
    ["@svgr/babel-plugin-transform-svg-component", { "titleProp": true }]
  ]
}
```

## License

MIT
npm package: @svgr/babel-preset
Description: SVGR preset that apply transformations from config
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/babel-preset

## Install

```
npm install --save-dev @svgr/babel-preset
```

## Usage

**.babelrc**

```json
{
  "presets": [["@svgr/babel-preset", { "svgProps": { "width": 200 } }]]
}
```

## License

MIT
npm package: @svgr/cli
Description: SVGR command line.
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/cli

[![Build Status][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]

Command Line Interface for SVGR.

```
npm install @svgr/cli --save-dev
```

## Usage

```
Usage: svgr [options] <file|directory>

Options:
  -V, --version                    output the version number
  --config-file <file>             specify the path of the svgr config
  --no-runtime-config              disable runtime config (".svgrrc", ".svgo.yml", ".prettierrc")
  -d, --out-dir <dirname>          output files into a directory
  --ignore-existing                ignore existing files when used with --out-dir
  --ext <ext>                      specify a custom file extension (default: "js")
  --filename-case <case>           specify filename case ("pascal", "kebab", "camel", "snake") (default: "pascal")
  --icon                           use "1em" as width and height
  --native                         add react-native support with react-native-svg
  --memo                           add React.memo into the result component
  --ref                            forward ref to SVG root element
  --no-dimensions                  remove width and height from root SVG tag
  --expand-props [position]        disable props expanding ("start", "end", "none") (default: "end")
  --svg-props <property=value>     add props to the svg element
  --replace-attr-values <old=new>  replace an attribute value
  --template <file>                specify a custom template to use
  --index-template <file>          specify a custom index.js template to use
  --no-index                       disable index file generation
  --title-prop                     create a title element linked with props
  --desc-prop                      create a desc element linked with props
  --prettier-config <fileOrJson>   Prettier config
  --no-prettier                    disable Prettier
  --svgo-config <fileOrJson>       SVGO config
  --no-svgo                        disable SVGO
  --silent                         suppress output
  --stdin                          force reading input from stdin
  --stdin-filepath                 path to the file to pretend that stdin comesfrom
  -h, --help                       output usage information

  Examples:
    svgr --replace-attr-values "#fff=currentColor" icon.svg
```

## License

MIT

[build-badge]: https://img.shields.io/travis/smooth-code/svgr.svg?style=flat-square
[build]: https://travis-ci.org/smooth-code/svgr
[version-badge]: https://img.shields.io/npm/v/@svgr/core.svg?style=flat-square
[package]: https://www.npmjs.com/package/@svgr/core
[license-badge]: https://img.shields.io/npm/l/@svgr/core.svg?style=flat-square
[license]: https://github.com/smooth-code/svgr/blob/master/LICENSE
npm package: @svgr/core
Description: Transform SVG into React Components.
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/core

[![Build Status][build-badge]][build]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]

Node API of SVGR.

```
npm install @svgr/core
```

## Usage

```js
import { transform } from '@svgr/core'

const svgCode = `
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="10" y="10" height="100" width="100"
    style="stroke:#ff0000; fill: #0000ff"/>
</svg>
`

transform(svgCode, { icon: true }, { componentName: 'MyComponent' }).then(
  (jsCode) => {
    console.log(jsCode)
  },
)
```

Use `svgr.sync(code, config, state)` if you would like to use sync version.

### Plugins

By default `@svgr/core` doesn't include any plugin, if you want them, you have to install them and include them in config.

```js
svgr(svgCode, {
  plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
}).then((jsCode) => {
  console.log(jsCode)
})
```

## License

MIT

[build-badge]: https://img.shields.io/travis/smooth-code/svgr.svg?style=flat-square
[build]: https://travis-ci.org/smooth-code/svgr
[version-badge]: https://img.shields.io/npm/v/@svgr/core.svg?style=flat-square
[package]: https://www.npmjs.com/package/@svgr/core
[license-badge]: https://img.shields.io/npm/l/@svgr/core.svg?style=flat-square
[license]: https://github.com/smooth-code/svgr/blob/master/LICENSE
npm package: @svgr/hast-util-to-babel-ast
Description: Transform HAST to Babel AST (JSX)
Author: Greg Bergé
Latest version: 8.0.0

# @svgr/hast-util-to-babel-ast

[![Build Status](https://img.shields.io/travis/smooth-code/svgr.svg)](https://travis-ci.org/smooth-code/svgr)
[![Version](https://img.shields.io/npm/v/@svgr/hast-util-to-babel-ast.svg)](https://www.npmjs.com/package/@svgr/hast-util-to-babel-ast)
[![MIT License](https://img.shields.io/npm/l/@svgr/hast-util-to-babel-ast.svg)](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Transforms HAST into Babel AST.

## Install

```
npm install --save-dev @svgr/hast-util-to-babel-ast
```

## Usage

```js
import { parse } from 'svg-parser'
import hastToBabelAst from '@svgr/hast-util-to-babel-ast'

const hastTree = parse(`<svg></svg>`)

const babelTree = hastToBabelAst(hastTree)
```

## License

MIT
npm package: @svgr/plugin-jsx
Description: Transform SVG into JSX
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/plugin-jsx

[![Build Status](https://img.shields.io/travis/smooth-code/svgr.svg)](https://travis-ci.org/smooth-code/svgr)
[![Version](https://img.shields.io/npm/v/@svgr/plugin-jsx.svg)](https://www.npmjs.com/package/@svgr/plugin-jsx)
[![MIT License](https://img.shields.io/npm/l/@svgr/plugin-jsx.svg)](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Transforms SVG into JSX.

## Install

```
npm install --save-dev @svgr/plugin-jsx
```

## Usage

**.svgrrc**

```json
{
  "plugins": ["@svgr/plugin-jsx"]
}
```

## How does it work?

`@svgr/plugin-jsx` consists in three phases:

- Parsing the SVG code using [svg-parser](https://github.com/Rich-Harris/svg-parser)
- Converting the [HAST](https://github.com/syntax-tree/hast) into a [Babel AST](https://github.com/babel/babel/blob/master/packages/babel-parser/ast/spec.md)
- Applying [`@svgr/babel-preset`](../babel-preset/README.md) transformations

## Applying custom transformations

You can extend the Babel config applied in this plugin using `jsx.babelConfig` config path:

```js
// .svgrrc.js

module.exports = {
  jsx: {
    babelConfig: {
      plugins: [
        // For an example, this plugin will remove "id" attribute from "svg" tag
        [
          '@svgr/babel-plugin-remove-jsx-attribute',
          {
            elements: ['svg'],
            attributes: ['id'],
          },
        ],
      ],
    },
  },
}
```

Several Babel plugins are available:

- [`@svgr/babel-plugin-add-jsx-attribute`](../babel-plugin-add-jsx-attribute/README.md)
- [`@svgr/babel-plugin-remove-jsx-attribute`](../babel-plugin-remove-jsx-attribute/README.md)
- [`@svgr/babel-plugin-remove-jsx-empty-expression`](../babel-plugin-remove-jsx-empty-expression/README.md)
- [`@svgr/babel-plugin-replace-jsx-attribute-value`](../babel-plugin-replace-jsx-attribute-value/README.md)
- [`@svgr/babel-plugin-svg-dynamic-title`](../babel-plugin-svg-dynamic-title/README.md)
- [`@svgr/babel-plugin-svg-em-dimensions`](../babel-plugin-svg-em-dimensions/README.md)
- [`@svgr/babel-plugin-transform-react-native-svg`](../babel-plugin-transform-react-native-svg/README.md)
- [`@svgr/babel-plugin-transform-svg-component`](../babel-plugin-transform-svg-component/README.md)

If you want to create your own, reading [Babel Handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md) is a good start!

## License

MIT
npm package: @svgr/plugin-prettier
Description: Format code using Prettier
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/plugin-prettier

[![Build Status](https://img.shields.io/travis/smooth-code/svgr.svg)](https://travis-ci.org/smooth-code/svgr)
[![Version](https://img.shields.io/npm/v/@svgr/plugin-prettier.svg)](https://www.npmjs.com/package/@svgr/plugin-prettier)
[![MIT License](https://img.shields.io/npm/l/@svgr/plugin-prettier.svg)](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Format SVG code using Prettier.

## Install

```
npm install --save-dev @svgr/plugin-prettier
```

## Usage

**.svgrrc**

```json
{
  "plugins": ["@svgr/plugin-prettier"]
}
```

## License

MIT
npm package: @svgr/plugin-svgo
Description: Optimize SVG
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/plugin-svgo

[![Build Status](https://img.shields.io/travis/smooth-code/svgr.svg)](https://travis-ci.org/smooth-code/svgr)
[![Version](https://img.shields.io/npm/v/@svgr/plugin-svgo.svg)](https://www.npmjs.com/package/@svgr/plugin-svgo)
[![MIT License](https://img.shields.io/npm/l/@svgr/plugin-svgo.svg)](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Optimize SVG using SVGO.

## Install

```
npm install --save-dev @svgr/plugin-svgo
```

## Usage

**.svgrrc**

```json
{
  "plugins": ["@svgr/plugin-svgo"]
}
```

## License

MIT
npm package: @svgr/rollup
Description: SVGR Rollup plugin.
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/rollup

[![Build Status](https://img.shields.io/travis/smooth-code/svgr.svg)](https://travis-ci.org/smooth-code/svgr)
[![Version](https://img.shields.io/npm/v/@svgr/rollup.svg)](https://www.npmjs.com/package/@svgr/rollup)
[![MIT License](https://img.shields.io/npm/l/@svgr/rollup.svg)](https://github.com/smooth-code/svgr/blob/master/LICENSE)

Rollup plugin for SVGR.

```
npm install @svgr/rollup --save-dev
```

In your `rollup.config.js`:

```js
{
  plugins: [svgr()]
}
```

In your code:

```js
import Star from './star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)
```

### Passing options

```js
{
  plugins: [svgr({ native: true })]
}
```

### Using with `url` plugin

It is possible to use it with [`url`](https://github.com/rollup/rollup-plugin-url).

In your `rollup.config.js`:

```js
{
  plugins: [url(), svgr()]
}
```

In your code:

```js
import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)
```

The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.

Please note that by default, `@svgr/rollup` will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, `@svgr/rollup` will always export the React component via named export.

If you prefer named export in any case, you may set the `exportType` option to `named`.

### Use your own Babel configuration

By default, `@svgr/rollup` applies a babel transformation with [optimized configuration](https://github.com/gregberge/svgr/blob/main/packages/rollup/src/index.ts). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

```js
{
  plugins: [svgr({ babel: false })]
}
```

## License

MIT
npm package: @svgr/webpack
Description: SVGR webpack loader.
Author: Greg Bergé
Latest version: 8.1.0

# @svgr/webpack

[![Build Status](https://img.shields.io/travis/gregberge/svgr.svg)](https://travis-ci.org/gregberge/svgr)
[![Version](https://img.shields.io/npm/v/@svgr/webpack.svg)](https://www.npmjs.com/package/@svgr/webpack)
[![MIT License](https://img.shields.io/npm/l/@svgr/webpack.svg)](https://github.com/gregberge/svgr/blob/master/LICENSE)

Webpack loader for SVGR.

```
npm install @svgr/webpack --save-dev
```

## Usage

In your `webpack.config.js`:

```js
{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}
```

In your code:

```js
import Star from './star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)
```

### Passing options

```js
{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        native: true,
      },
    },
  ],
}
```

### Using with `url-loader` or `file-loader`

It is possible to use it with [`url-loader`](https://github.com/webpack-contrib/url-loader) or [`file-loader`](https://github.com/webpack-contrib/file-loader).

In your `webpack.config.js`:

```js
{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'url-loader'],
}
```

In your code:

```js
import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)
```

The named export defaults to `ReactComponent`, but can be customized with the `namedExport` option.

Please note that by default, `@svgr/webpack` will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, `@svgr/webpack` will always export the React component via named export.

If you prefer named export in any case, you may set the `exportType` option to `named`.

### Use your own Babel configuration

By default, `@svgr/webpack` includes a `babel-loader` with [an optimized configuration](https://github.com/gregberge/svgr/blob/main/packages/webpack/src/index.ts). In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying `babel: false` in options.

```js
// Example using preact
{
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['preact', 'env'],
      },
    },
    {
      loader: '@svgr/webpack',
      options: { babel: false },
    }
  ],
}
```

### Handle SVG in CSS, Sass or Less

It is possible to detect the module that requires your SVG using [`Rule.issuer`](https://webpack.js.org/configuration/module/#ruleissuer) in Webpack 5. Using it you can specify two different configurations for JavaScript and the rest of your files.

```js
;[
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: /\.[jt]sx?$/,
    use: ['babel-loader', '@svgr/webpack', 'url-loader'],
  },
  {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url-loader',
  },
]
```

_[Rule.issuer](https://v4.webpack.js.org/configuration/module/#ruleissuer) in Webpack 4 has additional conditions which are not available in Webpack 5._

## License

MIT
npm package: @svgsketch/cli
Description: CLI tool for rendering and validating SVGSketch documents
Latest version: 0.1.0

# @svgsketch/cli

Command-line interface for working with SVGSketch `.svgs` documents.

## Install

```bash
npm install -g @svgsketch/cli
```

## Commands

```bash
svgsketch validate <input>
svgsketch render <input> -o <output.svg>
svgsketch info <input>
svgsketch vars <input>
svgsketch codegen <input> -f <svg|react|vue|d3|css>
```

## Examples

```bash
# Validate a document
svgsketch validate design.svgs

# Render to SVG
svgsketch render design.svgs -o out.svg --background white

# Generate React component
svgsketch codegen icon.svgs -f react -o Icon.tsx --name Icon --typescript

# Generate CSS+SVG markup
svgsketch codegen design.svgs -f css -o design-snippet.svg
```
npm package: @svgsketch/core
Description: Core types, document format, and rendering engine for SVGSketch
Latest version: 0.2.0

# @svgsketch/core

Core SDK and document engine for SVGSketch.

## Install

```bash
npm install @svgsketch/core
```

## Usage

```ts
import { Document, Circle } from '@svgsketch/core';

const doc = new Document({ width: 400, height: 300 }).add(
  new Circle(200, 150, 80).fill('#2563eb')
);

const svg = doc.toSVG();
const svgsJson = doc.toJSON();
```

## What It Includes

- `types`: `.svgs` schema and shared type definitions
- `format`: parse, stringify, migrate, validate, template helpers
- `renderer`: headless SVG rendering
- `sdk`: fluent `Document`, shape, style, and animation builders
- `codegen`: SVG, React, Vue, D3, and CSS+SVG output generators
npm package: @svgsketch/plugin-sdk
Description: TypeScript types and interfaces for building SVGSketch plugins
Latest version: 0.1.0

# @svgsketch/plugin-sdk

TypeScript types and interfaces for building [SVGSketch](https://svgsketch.com) editor plugins.

## Installation

```bash
npm install --save-dev @svgsketch/plugin-sdk
```

## Quick Start

```typescript
import type { SVGSketchPlugin, PluginContext } from '@svgsketch/plugin-sdk';

export function createMyPlugin(): SVGSketchPlugin {
  let ctx: PluginContext | null = null;

  return {
    id: 'my-plugin',
    name: 'My Plugin',
    version: '1.0.0',

    contributions: {
      commands: [
        {
          id: 'my-plugin.hello',
          label: 'Say Hello',
          category: 'My Plugin',
          onExecute: () => ctx?.showToast('Hello from my plugin!'),
        },
      ],
    },

    activate(pluginCtx) {
      ctx = pluginCtx;

      // Listen for selection changes
      const dispose = ctx.onSelectionChanged((shapes) => {
        console.log(`${shapes.length} shapes selected`);
      });
    },

    deactivate() {
      ctx = null;
    },
  };
}
```

## What's Included

This package provides TypeScript type definitions for the entire SVGSketch plugin API:

- **`SVGSketchPlugin`** — The top-level interface every plugin implements
- **`PluginContext`** — The API facade plugins receive on activation (shape read/write, events, viewport, UI, i18n)
- **`ShapeState`** — Composed from focused sub-interfaces (`GeometryProps`, `TextProps`, `StrokeProps`, etc.)
- **Contributions** — `ToolContribution`, `PanelContribution`, `CommandContribution`, `MenuItemContribution`, `StatusBarContribution`, `SettingsContribution`
- **Events** — `PluginEventMap` with 20+ event types, `InterceptableEvent`, `InterceptResult`
- **Middleware** — `CanvasMiddlewareRegistration`, `CanvasPointerEventInfo`
- **UI Fields** — 16 declarative field types for building popout and panel UIs
- **Tool Handlers** — `ToolHandler`, `ToolEventContext`, `DragToCreateHandler`

## Documentation

- [Plugin Development Guide](https://docs.svgsketch.com/plugins/) — tutorials and getting started
- [API Reference](https://docs.svgsketch.com/plugins/api-reference/) — complete PluginContext reference
- [Contributions](https://docs.svgsketch.com/plugins/contributions/) — tools, panels, commands, menus
- [Events & Middleware](https://docs.svgsketch.com/plugins/events/) — event system and pointer middleware

## License

MIT
npm package: @svgv/core
Description: Node.js API to transform SVGs into Vue components.
Latest version: 0.1.0

# [@svgv/core](https://github.com/marella/svgv/tree/main/packages/core) [![tests](https://github.com/marella/svgv/actions/workflows/tests.yml/badge.svg)](https://github.com/marella/svgv/actions/workflows/tests.yml) [![Coverage Status](https://coveralls.io/repos/github/marella/svgv/badge.svg)](https://coveralls.io/github/marella/svgv)

Node.js API to transform SVGs into Vue components.

> For webpack loader, see [`@svgv/webpack`](https://www.npmjs.com/package/@svgv/webpack)

## Installation

```sh
npm install @svgv/core
```

## Usage

```js
const { transform } = require('@svgv/core');

const code = await transform(svg, config, state);
```

## License

[MIT](https://github.com/marella/svgv/blob/main/packages/core/LICENSE)
npm package: @svgv/webpack
Description: Webpack loader to transform SVGs into Vue components.
Latest version: 0.1.0

# [@svgv/webpack](https://github.com/marella/svgv/tree/main/packages/webpack) [![tests](https://github.com/marella/svgv/actions/workflows/tests.yml/badge.svg)](https://github.com/marella/svgv/actions/workflows/tests.yml) [![Coverage Status](https://coveralls.io/repos/github/marella/svgv/badge.svg)](https://coveralls.io/github/marella/svgv)

Webpack loader to transform SVGs into Vue components.

## Installation

```sh
npm install @svgv/webpack --save-dev
```

## Usage

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['vue-loader', '@svgv/webpack'],
      },
    ],
  },
};
```

<details>
<summary><strong>vue.config.js</strong></summary><br>

```js
module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@svgv/webpack')
      .loader('@svgv/webpack')
      .end();
  },
};
```

</details>
<p></p>

**App.vue**

```html
<template>
  <div>
    <Star />
  </div>
</template>

<script>
import Star from './star.svg';

export default {
  components: {
    Star,
  },
};
</script>
```

### Using with `url-loader` or `file-loader`

> **Note:** This is an experimental feature.

**webpack.config.js**

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['vue-loader', '@svgv/webpack', 'url-loader'],
      },
    ],
  },
};
```

<details>
<summary><strong>vue.config.js</strong></summary><br>

```js
module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@svgv/webpack')
      .loader('@svgv/webpack')
      .end()
      .use('url-loader')
      .loader('url-loader')
      .end();
  },
};
```

</details>
<p></p>

**App.vue**

```html
<template>
  <div>
    <img :src="Star" />
    <Star />
  </div>
</template>

<script>
import Star from './star.svg';

export default {
  components: {
    Star,
  },
  data() {
    return {
      Star,
    };
  },
};
</script>
```

## Examples

See [examples](https://github.com/marella/svgv/tree/main/packages/webpack/examples).

## License

[MIT](https://github.com/marella/svgv/blob/main/packages/webpack/LICENSE)
npm package: @svgx/vite-plugin-react
Description: svgx vite plugin to import SVG files as react components
Author: salih benlalla
Latest version: 1.0.1

# SVGX Vite Plugin for React

Vite plugin to import SVG files as React Components, it transforms raw SVG markup to React Components that can be then inserted directly into the JSX code.

## Install

This package is hybrid (ESM & CommonJS), which means it can be `import`ed or `require`d.

**npm**

```
npm install --save-dev @svgx/vite-plugin-react
```

## Use

**Include the plugin in vite.config.js**

```js
import { defineConfig } from "vite";
import svgx from "@svgx/vite-plugin-react";

export default defineConfig(async () => {
  return {
    plugins: [
      svgx(),
      /* ... other plugins*/
    ],
  };
});
```

## Regular import

```js
import MyIcon from "./icon.svg?component";
// <MyIcon />
```

```js
import MyIcon from "./icon.svg?url";
// './assets/svg/icon.svg'
```

```js
import MyIcon from "./icon.svg?raw";
// '<svg xmlns="http://www.w3.org/2000/svg" ...'
```

## Dynamic import variables

```jsx
import importVars from "@svgx-dir:/path/to/directory";

export default function (props) {
  const MyIcon = importVars(props.iconName);
  return (
    <div>
      <MyIcon color="#FF5733" />
    </div>
  );
}
```

Replace `/path/to/directory` with the path to the directory containing your SVG files.

## Typescript

to get proper typing include this plugin in `types` array in your `tsconfig.json`

```json
// tsconfig.json
"compilerOptions": {
  "types": ["@svgx/vite-plugin-react", "node", "vite/client"],
  // ...other settings
}
```

This plugin works the same as [@svgx/vite-plugin-qwik](https://github.com/salihbenlalla/svgx/blob/main/packages/vite-plugin-qwik). for in depth documentation and options head to [@svgx/vite-plugin-qwik documentation](https://github.com/salihbenlalla/svgx/blob/main/packages/vite-plugin-qwik)
npm package: @sving/arrow
Description: Mobile pop-up options list
Author: dntzhang
Latest version: 0.0.11

## ActionSheet

Mobile pop-up options list

* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)

## Import

```js
import '@omiu/action-sheet'
```

Or use script tag to ref it.


```html
<script src="https://unpkg.com/@omiu/action-sheet"></script>
```

## Usage

```html
<o-action-sheet></o-action-sheet>
```

## API

### Props

```tsx
{
  type: string,
  menus: any[],
  actions: any[],
  show: boolean
}
```

### 默认属性

```tsx
{
  type: '',
  menus: [],
  actions: [],
  show: false
}
```
### Events

* item-click
* close
npm package: @svipwrap/react-native-ali-video-player
Description: react-native aliplayer
Author: SSzzPP
Latest version: 1.0.6

## Installation

```sh
npm install react-native-ali-video-player
```

## Usage
```ts
import VideoPlayer from 'react-native-ali-video-player';

const refPlayer = React.useRef<VideoPlayerHandler>(null);
const uriSource = { uri: "https://player.alicdn.com/video/aliyunmedia.mp4" }

const stsSource = {
  sts: {
    vid: 'YOUR_VID'
    region: 'YOUR_REGION',
    accessKeyId: 'YOUR_ACCESS_KEY_ID',
    accessKeySecret: 'YOUR_ACCESS_KEY_SECRET',
    securityToken: 'YOUR_SECURITY_TOKEN',
  },
}

const authSource = {
  auth: {
    vid: 'YOUR_VID'
    region: 'YOUR_REGION',
    playAuth: 'YOUR_PLAY_AUTH',
  },
}

<VideoPlayer
  ref={refPlayer}
  isHiddenBack
  isLandscape
  enableBackground={true}
  source={uriSource /* or stsSource or authSource */}
  setAutoPlay={true}
  showTiming={true}
  onCompletion={() => {
    console.log('onCompletion');
  }}
  onError={(error: any) => {
    console.log('error', error);
  }}
  onProgress={(error: any) => {
    console.log('onProgress', error);
  }}
  onAliBitrateReady={e => {
    console.log('onAliBitrateReady', e.nativeEvent.bitrates);
  }}
  onAliLoadingEnd={e => {
    console.log('onAliLoadingEnd', e);
  }}
  onBufferProgress={(progress: any) => {
    console.log('onBufferProgress', progress);
  }}
  onPrepare={(duration: any) => {
    console.log('onPrepare', duration);
  }}
  style={[styles.box, {width: layout.width, height: 200}]}
/>
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @svipwrap/react-native-toast-message
Description: Toast message component for React Native
Author: SSzzPP
Latest version: 2.2.1

# react-native-toast-message

[![npm version](https://img.shields.io/npm/v/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
[![npm downloads](https://img.shields.io/npm/dw/react-native-toast-message)](https://www.npmjs.com/package/react-native-toast-message)
[![Build](https://github.com/calintamas/react-native-toast-message/workflows/tests/badge.svg)](https://github.com/calintamas/react-native-toast-message/actions?query=workflow%3Atests)
[![Coverage Status](https://coveralls.io/repos/github/calintamas/react-native-toast-message/badge.svg?branch=master)](https://coveralls.io/github/calintamas/react-native-toast-message?branch=main)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

Animated toast message component for React Native.

![toast gif](./docs/toast.gif)

## Features

- 🚀 Imperative API
- 📦 Very lightweight (~40 kB)
- ⌨️ Keyboard-aware
- 🎨 Customizable layouts
- 🔧 Flexible config

## Documentation

> This is the documentation for `react-native-toast-message@v2`, which has a similar API to v1, but contains a few important changes. [Read the complete changelog](./CHANGELOG.md#200).

- [Quick start](./docs/quick-start.md)
- [API](./docs/api.md)
- [Create custom layouts](./docs/custom-layouts.md)
- FAQ
  - [How to show the Toast inside a Modal?](./docs/modal-usage.md)
  - [How to render the Toast when using a Navigation library?](./docs/navigation-usage.md)
  - [How to mock the library for testing with jest?](./docs/jest-testing.md)

## License

MIT
npm package: @svipwrap/react-native-wmm-aliyunplayer
Description: aliyunplayer&&download
Author: SSzzPP
Latest version: 0.3.5

# react-native-wmm-aliyunplayer

## 说明

本库基于 `react-native-wmm-aliyunplayer`创建, 在原有播放器基础上添加了新功能，并封装了阿里云播的下载功能。
本库是阿里云播放器的，**_非全量_** 封装。支持功能**_播放、下载_**功能。

### 常用 Script

```shell
//  安装依赖
yarn bootstrap
//  运行iOS
yarn example ios
//  运行安卓
yarn example android
```

## Installation

```sh
npm install react-native-wmm-aliyunplayer

// or
yarn add react-native-wmm-aliyunplayer
```

### 安卓

Project build.gradle 添加 meaven 依赖`maven {url 'https://maven.aliyun.com/repository/releases'}`

### API

[播放器文档](./doc/API.md)

## TODO

- 下载列表，基于 sqlite 的 native 实现。
- example 播放器和下载的案例
- 下载 API 文档

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## Contributor

<a href="https://github.com/SSzzPP"><img src="https://avatars.githubusercontent.com/u/48024268?v=4" width=100 height=100 style="border-radius:50px" /></a>
<a href="https://github.com/nbhhcty"><img src="https://avatars.githubusercontent.com/u/11188644?v=4" width=100 height=100 style="border-radius:50px" /></a>
<a href="https://github.com/Feihua-czl"><img src="https://avatars.githubusercontent.com/u/21188352?v=4" width=100 height=100 style="border-radius:50px" /></a>
<a href="https://github.com/iHZW"><img src="https://avatars.githubusercontent.com/u/13400958?v=4" width=100 height=100 style="border-radius:50px" /></a>
<a href="https://github.com/JeversonJee"><img src="https://avatars.githubusercontent.com/u/16621180?v=4" width=100 height=100 style="border-radius:50px" /></a>

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

## Q&A

> iOS 调试代码 `yarn example ios`

> 关于 iOS `Hermes engine` pod install failure 时，可在`example/ios/Podfile`中将 `:hermes_enabled => false`

> 关于 iOS M1 Slice 问题

```shell
Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_RCTBridge", referenced from:
      objc-class-ref in AppDelegate.o
  "_OBJC_CLASS_$_RCTBundleURLProvider", referenced from:
      objc-class-ref in AppDelegate.o
  "_RCTAppSetupDefaultRootView", referenced from:
      -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o
  "_RCTAppSetupPrepareApp", referenced from:
      -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

```

此处模拟器`x86_64`问题应在`PodFile` 中添加`config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"`
npm package: @svitejs/changesets-changelog-github-compact
Description: a more compact version of the [@changesets/changelog-github](https://github.com/changesets/changesets/tree/main/packages/changelog-github) changelog generator
Author: dominikg
Latest version: 1.2.0

# @svitejs/changesets-changelog-github-compact

a more compact version of the [@changesets/changelog-github](https://github.com/changesets/changesets/tree/main/packages/changelog-github) changelog generator

## Installation

```bash
pnpm i -D @svitejs/changesets-changelog-github-compact
```

## Usage

set changelog in your `.changeset/config.json` to
```json
"changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "org/repo" }]
```

## comparison

### changelog-github

- [#PR-ID](#) [`commit`](#) Thanks [@user](#)! - some description for a changeset with a PR and commit
- [`commit`](#) Thanks [@user](#)! - some text description some description for a changeset without a PR

### changelog-github-compact
- some description for a changeset with a PR and commit ([PR](#))
- some description for a changeset without a PR ([commit](#))

## additional features

### auto-links in changeset descriptions
If you use `(see #123)`,`(fix #123)` or `(fixes #123)` in a changeset description, the `#123`will automatically be linkified to the corrosponding issue in your repo

example:
- some description (fixes [#123](#)) cool, huh? ([PR](#))
## License

[MIT](./LICENSE)
npm package: @svitejs/svelte-preprocess-svg
Description: Optimize inline svg in svelte components
Author: dominikg
Latest version: 2.0.0

# @svitejs/svelte-preprocess-svg

Optimize inline svg in svelte components

## Installation

```bash
npm install --save-dev @svitejs/svelte-preprocess-svg
```

## Usage

svelte.config.js

```js
import { sveltePreprocessSvg } from '@svitejs/svelte-preprocess-svg';
//...
export default {
	//...
	preprocess: [
		//...
		// sveltePreprocessSvg must be used AFTER other markup preprocessors like mdsvex
		sveltePreprocessSvg({
			/* options */
		})
	]
	//...
};
```

## Documentation

### options

```ts
export interface SveltePreprocessSvgOptions {
	/**
	 * Filter function to only include some files
	 *
	 * @param {PreprocessorInput} input - filename and content of the file to process
	 * @return boolean true to include the file
	 */
	include?: (input: PreprocessorInput) => boolean;

	/**
	 * Filter function to exclude some files
	 *
	 * @param {PreprocessorInput} input - filename and content of the file to process
	 * @return boolean true to exclude the file
	 */
	exclude?: (input: PreprocessorInput) => boolean;

	/**
	 * Array of transformers to apply.
	 * name: unique name of the transform - this is passed to skipTransform
	 * transform: function to manipulate svg
	 *
	 */
	transforms?: SvgTransform[];

	/**
	 * enable svgo transform, use object for custom svgo options.
	 * Without custom options it tries to load svgo config or uses defaults
	 *
	 * requires svgo to be installed as devDependency
	 */
	svgo?: boolean | object;

	/**
	 * do not wrap svg content in {@html ``}
	 */
	disableAtHtml?: boolean;

	/**
	 * skip a transform by name
	 * @param {PreprocessorInput} input - filename and content of the file to process
	 * @param {string} transform - name of the transform
	 * @param {string} svg - the svg to transform (previous transforms are already applied!)
	 */
	skipTransform?: (input: PreprocessorInput, transform: string, svg: string) => boolean;

	/**
	 * Set to true to use a simple string search instead of svelte.parse.
	 * This is faster but not fault tolerant. misaligned html comments or svg inside string literals will trip it up
	 */
	useSimpleStringParser?: boolean;
}
```

## License

[MIT](./LICENSE)
npm package: @svitejs/vite-plugin-env-import
Description: Import env vars
Author: dominikg
Latest version: 1.0.0-next.1

# @svitejs/vite-plugin-env-import

Import env vars

## Installation

```bash
pnpm i -D @svitejs/vite-plugin-env-import
```

## Usage

### add plugin to vite config

```ts
// vite config
import { defineConfig } from 'vite';
import { envImport } from '@svitejs/vite-plugin-env-import';

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

### import from virtual modules

#### virtual:env

Contains all env variables that do not start with a public prefix with their value as static strings.

```js
import { SUPER_SECRET } from 'virtual:env';
```

> imports from 'virtual:env' only work in ssr code, if you do this in client code, an error is thrown

##### virtual:env:runtime

Same as `virtual:env` but instead of static value replacement at buildtime, it uses `process.env.XXX` so the actual runtime value at time of ssr is used

#### virtual:env:public

Contains all env variables that start with a public prefix with their value as static strings.

```js
import { VITE_TITLE } from 'virtual:env:public';
```

> imports from 'virtual:env:public' work in client and ssr code

##### virtual:env:public:runtime

Same as `virtual:env:public` but instead of static value replacement at buildtime, it uses `process.env.XXX` so the actual runtime value at time of ssr is used

> imports from 'virtual:env:public:runtime' only work in ssr code, if you do thing in client code, an error is thrown
>
> This is due to the fact that clientside code cannot access the ssr runtime env

## License

[MIT](./LICENSE)
npm package: @svitejs/vite-plugin-svelte
Description: ## usage
Author: dominikg
Latest version: 0.11.1
Deprecated: this package has moved to @sveltejs/vite-plugin-svelte, please update your dependencies.

# @svitejs/vite-plugin-svelte

## usage

```js
// vite.config.js
const svelte = require('@svitejs/vite-plugin-svelte')
const { defineConfig } = require('vite')

module.exports = defineConfig(({ command, mode }) => {
  const isProduction = mode === 'production'
  return {
    plugins: [
      svelte({
        /* inline options here */
      })
    ],
    build: {
      minify: isProduction
    }
  }
})
```

## Options

vite-plugin-svelte reads the vite configuration and uses an appropriate default configuration

It also loads `svelte.config.js` (or `svelte.config.cjs`) from the configured `vite.root` directory automatically.

Options are applied in the following order:

1. vite-plugin-svelte defaults
2. svelte.config.js in vite.root
3. inline options passed in vite.config.js

It supports all options from rollup-plugin-svelte and some additional options to tailor the plugin to your needs.

For more Information check [options.ts](src/utils/options.ts)

## License

MIT