open-index/open-npm huggingface dataset:
npm package: @kingyue/vite-plugin-vue2-svg
Description: Vite plugin to load SVG files as Vue 2 components
Author: yuejin13@fudan.edu.cn
Latest version: 0.6.0

# vite-plugin-vue2-svg

Load SVG files as Vue components, for Vue2.x only.

This fork fixs bugs of the unmaintained [original repo](https://github.com/pakholeung37/vite-plugin-vue2-svg).

[![NPM](https://nodei.co/npm/@kingyue/vite-plugin-vue2-svg.png)](https://www.npmjs.com/package/@kingyue/vite-plugin-vue2-svg)

## Install

```bash
pnpm add -D @kingyue/vite-plugin-vue2-svg
# or
yarn add -D @kingyue/vite-plugin-vue2-svg
# or
npm install -D @kingyue/vite-plugin-vue2-svg
```

## Usage

```js
// vite.config.ts
import { defineConfig } from "vite";
import createVuePlugin from "@vitejs/plugin-vue2";
import { createSvgPlugin } from "@kingyue/vite-plugin-vue2-svg";

export default defineConfig({
  plugins: [createVuePlugin(), createSvgPlugin()],
});
```

```vue
<!-- App.vue -->
<template>
  <Icon />
</template>
<script>
import Icon from "./icon.svg";

export default {
  components: {
    Icon,
  },
};
</script>
```

If you want disabled this plugin for specific file, just add `?raw` when you import.

```typescript
import Icon from "./icon.svg?raw"; // svg file import without transform
```

## Options

```ts
createSvgPlugin(option: {
  svgo?: boolean            // whether optimized by svgo
  svgoConfig?: SVGO.Options // check https://github.com/svg/svgo
  defaultImport?: 'url' | 'raw'
} = {});
```

## License

[MIT](LICENSE)
npm package: @kingyue/vuetify2-component-types
Description: Component types for Volar intellisense with Vuetify 2 and Vue 2.7
Author: ascott18, kingyue737
Latest version: 2.7.0

# Vuetify2 Component Types

This package includes generated global component types for Vuetify ^2.6.13 and Vue 2.7. This will give full intellisense to Volar when using these versions.

![npm](https://img.shields.io/npm/v/@kingyue/vuetify2-component-types)

## Instructions

1. Install this package: `npm i @kingyue/vuetify2-component-types -D`
2. Add this package to your tsconfig's `types`:
   ```json
   {
     "compilerOptions": {
       "types": ["@kingyue/vuetify2-component-types"],
     }
   },
   ```
3. Configure tsconfig's `vueCompilerOptions` for proper Volar support:
   ```json
   {
     "vueCompilerOptions": {
       "target": 2.7,
       "experimentalModelPropName": {
         "input-value": {
           "v-checkbox": true,
           "v-switch": true,
           "v-chip": true,
           "v-btn": true,
           "v-list-item": true,
           "v-bottom-navigation": true
         },
         "": { "input": true },
         "value": {
           "input": { "type": "text" },
           "textarea": true,
           "select": true
         }
       }
     }
   }
   ```

## Acknowledgements

Most of the credit goes to [@kingyue737](https://github.com/kingyue737) who made the initial script [here](https://github.com/vuetifyjs/vuetify/issues/14798#issuecomment-1139788615).
npm package: @kiniro/core
Description: Internals of @kiniro/lang
Author: klntsky
Latest version: 2.0.6

![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@kiniro/core.svg)
![NpmLicense](https://img.shields.io/npm/l/@kiniro/core.svg)

This package contains internals of [@kiniro/lang](https://gitlab.com/kiniro/lang).

Docs are available [here](https://kiniro.gitlab.io/core/).

[gitlab](https://gitlab.com/kiniro/core) / [npm](https://www.npmjs.com/package/@kiniro/core)
npm package: @kiniro/editor
Description: CodeMirror mode for @kiniro/lang (with demo).
Author: klntsky
Latest version: 0.0.3

![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@kiniro/editor.svg)
![NpmLicense](https://img.shields.io/npm/l/@kiniro/editor.svg)

CodeMirror mode for [@kiniro/lang](https://gitlab.com/kiniro/lang).

[gitlab](https://gitlab.com/kiniro/editor) / [npm](https://www.npmjs.com/package/@kiniro/editor) / [demo](https://kiniro.gitlab.io/editor)
npm package: @kiniro/env
Description: Reusable environment class for @kiniro/lang.
Author: klntsky
Latest version: 0.0.2

![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@kiniro/env.svg)
![NpmLicense](https://img.shields.io/npm/l/@kiniro/env.svg)

Reusable environment class for [@kiniro/lang](https://gitlab.com/kiniro/lang).

[gitlab](https://gitlab.com/kiniro/env) / [npm](https://www.npmjs.com/package/@kiniro/env) / [jsdoc](https://kiniro.gitlab.io/env)
npm package: @kiniro/parser
Description: Parser for @kiniro/lang
Author: klntsky
Latest version: 2.0.0

![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@kiniro/parser.svg)
![NpmLicense](https://img.shields.io/npm/l/@kiniro/parser.svg)

Parser for [@kiniro/lang](https://gitlab.com/kiniro/lang).

[gitlab](https://gitlab.com/kiniro/parser) / [npm](https://www.npmjs.com/package/@kiniro/parser)
npm package: @kiniro/prelude
Description: Definitions for @kiniro/lang
Author: klntsky
Latest version: 1.1.2

![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@kiniro/prelude.svg)
![NpmLicense](https://img.shields.io/npm/l/@kiniro/prelude.svg)

Definitions for [@kiniro/lang](https://gitlab.com/kiniro/lang).

[gitlab](https://gitlab.com/kiniro/prelude) / [npm](https://www.npmjs.com/package/@kiniro/prelude)
npm package: @kiniui/components
Description: This package contains a library shared components between Keeper and VLM.
Author: hekmatkeeper
Latest version: 1.4.3

# Keeper Components

This package contains a library shared components between Keeper and VLM.

## Using this package

This package can be consumed using NPM. It is distributed as a private NPM package and as such
it is necessary to login to an NPM account which is authorized by keeperinc organization
in order to be able to pull this package.

```
$ npm login
$ npm install --save @keeperinc/components
```

You can then import any component provided by this package and use them with your own chakra themes

```typescript
import SimpleCard, { SimpleCardProps } from './SimpleCard'

const MyComponent = (props) => (
  <ChakraProvider theme={keeperTheme}>
    <SimpleCard {...props}>This is what it looks like with Keeper's Theme</SimpleCard>
  </ChakraProvider>
)
```

### Storybook

All the components delivered with this package are documented using the storybook appliance.

```
$ git pull
$ npm install
$ npm run storybook
```

You can also access the public storybook instance hosted on Amplify:
https://master.d8xmk1tk7pcda.amplifyapp.com/

### Testing

Every component is tested using cypress and test can be run and visualized using the following commands:

```
$ git pull
$ npm install
$ npx cypress open
```

### Changelog

This package uses semantic versioning

![img.png](https://i.imgur.com/8qWkehB.png)

#### Version 0.0.1

- SimpleCard was added, cypress for testing and storybook for documentation

## Contributing

- Follow [our javascript conventions](https://www.notion.so/keeperinc/Javascript-Code-Conventions-7f1e0951a52d4913944d91742c84703d)
- All components must be themable using chakra
- All components must be 508/WCAG compliant
- All components must be applicable to any project
- No global state is allowed
- Every component must be documented in the storybook
- Every component must be tested using cypress
npm package: @kinka/babel-plugin-react-native-web
Description: Babel plugin for React Native for Web
Author: Nicolas Gallagher
Latest version: 0.6.1

# babel-plugin-react-native-web

**This is a forked version, will be removed once the feature(custom web module settings) merged to upstream**

[![npm version][package-badge]][package-url] [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)

A Babel plugin that will alias `react-native` to `react-native-web` and exclude
any modules not required by your app (keeping bundle size down).

## Installation

```
yarn add --dev babel-plugin-react-native-web
```

## Usage

**.babelrc**

```
{
  "plugins": ["react-native-web"]
}
```

You can set your own web modules in babel options:
```
{
  "plugins": [
    ["react-native-web", {
      "Modal": "/your/path/to/Modal", "Text": "/your/path/to/Text"
    }]
  ]
}
```

## Example

NOTE: `react-native-web` internal paths are _not stable_ and you must not rely
on them. Always use the Babel plugin to optimize your build. What follows is an
example of the rewrite performed by the plugin.

**Before**

```js
import { StyleSheet, View } from 'react-native';
```

**After**

```js
import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
import View from 'react-native-web/dist/exports/View';
```

[package-badge]: https://img.shields.io/npm/v/babel-plugin-react-native-web.svg?style=flat
[package-url]: https://yarnpkg.com/en/package/babel-plugin-react-native-web
npm package: @kinka/lbc-demo
Description: ## Project setup ``` yarn install ```
Latest version: 0.0.3

# @gf/lbc-demo

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @kinka/react-native-emoticons
Description: react native emoticons component
Author: xiewang
Latest version: 1.0.14

# React Native Emoticons
react native emoticons component, including emoji

![emoticons](docs/emoticons.gif)

### latest screenshot sample
![emoticons](docs/sample2.png )

<!--![Markdown](http://i2.muimg.com/1949/cda818de0596cd04.gif)-->
## Install

```js
npm install react-native-emoticons
```

## Usage

### UI Component

- step 1

	Import the component package.
	
	```js
	import Emoticons from 'react-native-emoticons';
	```
- step 2

	Write the component code in the proper place of your page render.
	
	```js
	<Emoticons
		 onEmoticonPress={this._onEmoticonPress.bind(this)}
		 onBackspacePress={this._onBackspacePress.bind(this)}
		 show={this.state.showEmoticons}
		 concise={true}
		 showHistoryBar={true}
		 showPlusBar={true}
     />
	```
	> **Tip:**  The attribute `onEmoticonPress ` can get the emoticos results like `{code:'😁', name: 'GRIMACING FACE'}`. The attribute `show ` will control that if the component is visible.  The attribute `onBackspacePress ` will add a function for backspace button. 

### props

| Prop | Type | Description | Required | Default |
|---|---|---|---|---|
|**`onEmoticonPress `**|`Function `| callback function when the emoticons is pressed |`Yes`|None|
|**`onBackspacePress `**|`Function `| callback function when the backspace button is pressed |`YES`|None|
|**`show `**|`Bool `| show the component |`YES`| false |
|**`concise `**|`Bool `| concise mod with less emoji |`No`| true |
|**`showHistoryBar `**|`Bool `| enable history function |`No`| true |
|**`showPlusBar `**|`Bool `| enable more emoticons function(is on developing, if you have interesting on this, welcome pull request.)|`No`| true |
|**`asyncRender `**|`Bool `| async render |`No`| false |

### API

Import

```js
import * as emoticons from 'react-native-emoticons';
```

1. stringify
	
	```js
	//Most database can't restore the emoji string😤,so we map 
	//them to common string.
	
	const string = emoticons.stringify('This is source emoji 😁');
	console.log(string);
	```
	```js
	//output
	'This is source emoji [GRIMACING FACE]'
	```
	
2. parse

	```js
	//If we want to show the emoji(fetch from database) in view page
	//we need parse the string
	
	const emoji = emoticons.parse('This is source emoji [GRIMACING FACE]');
	console.log(emoji);
	```
	```js
	//output
	'This is source emoji 😁'
	```

3. splitter

	```js
	//this api is for backspace function
	const emoji = emoticons.splitter('emoji😁');
	console.log(emoji);
	```
	```js
	//output
	['e','m','o','j','i','😁']
	```


## Further
	
###	Support custom emoticons like `weixin`