Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomjs/vite-plugin-iconify
A Vite plugin for handling iconify icon sets in environments without internet access.
https://github.com/tomjs/vite-plugin-iconify
cdn iconify local plugin vite
Last synced: 3 months ago
JSON representation
A Vite plugin for handling iconify icon sets in environments without internet access.
- Host: GitHub
- URL: https://github.com/tomjs/vite-plugin-iconify
- Owner: tomjs
- License: mit
- Created: 2023-11-08T15:08:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-01T16:11:17.000Z (7 months ago)
- Last Synced: 2024-10-30T04:51:30.422Z (3 months ago)
- Topics: cdn, iconify, local, plugin, vite
- Language: TypeScript
- Homepage:
- Size: 946 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - @tomjs/vite-plugin-iconify - Inject the global variable `IconifyProviders` into `index.html` for `iconify`, and support local area network and custom url. (Plugins / Framework-agnostic Plugins)
- awesome-vite - @tomjs/vite-plugin-iconify - Inject the global variable `IconifyProviders` into `index.html` for `iconify`, and support local area network and custom url. (Plugins / Framework-agnostic Plugins)
README
# @tomjs/vite-plugin-iconify
[](https://www.npmjs.com/package/@tomjs/vite-plugin-iconify)   [](https://www.unpkg.com/browse/@tomjs/vite-plugin-iconify/dist/index.d.ts)
**English** | [中文](./README.zh_CN.md)
> A Vite plugin for handling iconify icon sets in environments without internet access.
## Install
```bash
# pnpm
pnpm add @iconify/json @tomjs/vite-plugin-iconify -D
# yarn
yarn add @iconify/json @tomjs/vite-plugin-iconify -D
# npm
npm i @iconify/json @tomjs/vite-plugin-iconify --save-dev
```
## Usage
Using Vue/React projects as examples:
### Using the plugin
#### Vue Example
```js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import iconify from '@tomjs/vite-plugin-iconify';
export default defineConfig({
plugins: [
vue(),
iconify({
resources: ['https://unpkg.com/@iconify/json/json'],
rotate: 3000,
local: ['ant-design', 'ep'],
}),
],
});
```
#### React Example
```js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import iconify from '@tomjs/vite-plugin-iconify';
export default defineConfig({
plugins: [
react(),
iconify({
resources: ['https://unpkg.com/@iconify/json/json'],
rotate: 3000,
local: ['ant-design', 'ep'],
}),
],
});
```
#### Documentation
- [index.d.ts](https://www.unpkg.com/browse/@tomjs/vite-plugin-iconify/dist/index.d.ts) provided by [unpkg.com](https://www.unpkg.com).
#### Parameters
| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| selector | `string` | 'title' | The tag selector to inject the IconifyProviders script after |
| resources | `string[]` | [] | Icon API URLs, default includes https://api.iconify.design |
| rotate | `number` | 750 | Timeout in milliseconds before using the next host |
| timeout | `number` | 5000 | Timeout in milliseconds before an API query is considered failed |
| local | `'boolean'\|'IconifySet[]'\|IconifyLocal[]` | false | Local icon set configuration |
**resources**: You can add npm cdn or custom url:
- npmmirror:
- https://registry.npmmirror.com/@iconify/json/{version}/files/json
- https://registry.npmmirror.com/@iconify/json/latest/files/json
- https://registry.npmmirror.com/@iconify/json/2.2.187/files/json
- jsdelivr:
- https://cdn.jsdelivr.net/npm/@iconify/json@{version}/json
- https://cdn.jsdelivr.net/npm/@iconify/json/json
- https://cdn.jsdelivr.net/npm/@iconify/[email protected]/json
- unpkg:
- https://unpkg.com/@iconify/json@{version}/json
- https://unpkg.com/@iconify/json/json
- https://unpkg.com/@iconify/[email protected]/json
##### IconifySet
Iconify icon set, refer to [icon sets](https://icon-sets.iconify.design/) or [Icônes](https://icones.js.org/)
##### IconifyLocal
By configuring this parameter, the local icon set will be copied to the `outDir` directory based on the `sets` configuration.
| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| **sets** | `IconifySet[]` | [] | Iconify icon sets |
| base | `string` | '/' | Same as the `base` option in Vite configuration |
| outDir | `string` | 'dist' | Local output directory, default is the same as the `build.outDir` option in Vite configuration |
| path | `string` | 'npm/@iconify/json@{version}' | Local output path, the corresponding module URL will also be replaced with this path |
### Using CLI
Generate Iconify icon set data for icon selection and other functionalities.
- Add the following script to `package.json` under `scripts` : `ti ant-design ep --path src/constants`
- Or run the following command directly: `pnpm ti ant-design ep --path src/constants`
```bash
Usage:
$ ti [...sets]
Commands:
[...sets] create icon collection data based on @iconify/json in the project
For more info, run any command with the `--help` flag:
$ ti --help
Options:
--path [string] output file path. (default: src)
--name [string] output file name. if tsconfig is exists, default is 'iconify.ts', or is 'iconify.js'
--type ["esm" | "cjs"] output file type. (default: esm)
-h, --help Display this message
-v, --version Display version number
```
## Development
- Development requirements:
- git
- node>=16
- pnpm>=8
- For the first time, install dependencies by running the following command:
```bash
# Install dependencies
pnpm i
# build library
pnpm build
```
- To debug the `vue` project, execute the following commands:
```bash
cd examples/vue
pnpm build
pnpm preview
```
- To debug the `react` project, execute the following commands:
```bash
cd examples/react
pnpm build
pnpm preview
```