unplugin-icons - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

dist/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk2V2PCOBXjs = require('./chunk-2V2PCOBX.js');
-require('./chunk-72RBFHDI.js');
+var _chunkDM5KXBG2js = require('./chunk-DM5KXBG2.js');
+require('./chunk-4GRFR5LC.js');
 require('./chunk-6F4PWJZI.js');
@@ -9,2 +9,2 @@ require('./chunk-GVQYSYFP.js');
 
-exports.default = _chunk2V2PCOBXjs.src_default;
+exports.default = _chunkDM5KXBG2js.src_default;

dist/nuxt.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk2V2PCOBXjs = require('./chunk-2V2PCOBX.js');
-require('./chunk-72RBFHDI.js');
+var _chunkDM5KXBG2js = require('./chunk-DM5KXBG2.js');
+require('./chunk-4GRFR5LC.js');
 require('./chunk-6F4PWJZI.js');
@@ -12,7 +12,7 @@ require('./chunk-GVQYSYFP.js');
     config.plugins = config.plugins || [];
-    config.plugins.unshift(_chunk2V2PCOBXjs.src_default.webpack());
+    config.plugins.unshift(_chunkDM5KXBG2js.src_default.webpack());
   });
   this.nuxt.hook("vite:extend", async (vite) => {
     vite.config.plugins = vite.config.plugins || [];
-    vite.config.plugins.push(_chunk2V2PCOBXjs.src_default.vite());
+    vite.config.plugins.push(_chunkDM5KXBG2js.src_default.vite());
   });
@@ -19,0 +19,0 @@ }

dist/resolver.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunk72RBFHDIjs = require('./chunk-72RBFHDI.js');
+var _chunk4GRFR5LCjs = require('./chunk-4GRFR5LC.js');
 require('./chunk-GVQYSYFP.js');
@@ -32,3 +32,3 @@
       return;
-    if (!_chunk72RBFHDIjs.getIcon.call(void 0, collection, icon))
+    if (!_chunk4GRFR5LCjs.getIcon.call(void 0, collection, icon))
       return;
@@ -35,0 +35,0 @@ return `virtual:icons/${collection}/${icon}`;

dist/rollup.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk2V2PCOBXjs = require('./chunk-2V2PCOBX.js');
-require('./chunk-72RBFHDI.js');
+var _chunkDM5KXBG2js = require('./chunk-DM5KXBG2.js');
+require('./chunk-4GRFR5LC.js');
 require('./chunk-6F4PWJZI.js');
@@ -9,3 +9,3 @@ require('./chunk-GVQYSYFP.js');
 // src/rollup.ts
-var rollup_default = _chunk2V2PCOBXjs.src_default.rollup;
+var rollup_default = _chunkDM5KXBG2js.src_default.rollup;
 
@@ -12,0 +12,0 @@

dist/types.d.ts

@@ -25,3 +25,9 @@ interface Options {
      */
-    compiler?: 'vue2' | 'vue3';
+    compiler?: 'vue2' | 'vue3' | 'jsx';
+    /**
+     * JSX style, works only when compiler set to `jsx`
+     *
+     * @default 'react'
+     */
+    jsx?: 'react' | 'preact';
 }
@@ -28,0 +34,0 @@ declare type ResolvedOptions = Required<Options>;

dist/types.js

 "use strict";require('./chunk-6F4PWJZI.js');
 require('./chunk-GVQYSYFP.js');
-exports.default = module.exports;

dist/vite.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk2V2PCOBXjs = require('./chunk-2V2PCOBX.js');
-require('./chunk-72RBFHDI.js');
+var _chunkDM5KXBG2js = require('./chunk-DM5KXBG2.js');
+require('./chunk-4GRFR5LC.js');
 require('./chunk-6F4PWJZI.js');
@@ -9,3 +9,3 @@ require('./chunk-GVQYSYFP.js');
 // src/vite.ts
-var vite_default = _chunk2V2PCOBXjs.src_default.vite;
+var vite_default = _chunkDM5KXBG2js.src_default.vite;
 
@@ -12,0 +12,0 @@

dist/webpack.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk2V2PCOBXjs = require('./chunk-2V2PCOBX.js');
-require('./chunk-72RBFHDI.js');
+var _chunkDM5KXBG2js = require('./chunk-DM5KXBG2.js');
+require('./chunk-4GRFR5LC.js');
 require('./chunk-6F4PWJZI.js');
@@ -9,3 +9,3 @@ require('./chunk-GVQYSYFP.js');
 // src/webpack.ts
-var webpack_default = _chunk2V2PCOBXjs.src_default.webpack;
+var webpack_default = _chunkDM5KXBG2js.src_default.webpack;
 
@@ -12,0 +12,0 @@

index.d.ts

@@ -1,5 +0,3 @@
-import './shim-vue'
 import _default from './dist'
-
 export default _default
 export * from './dist'

package.json

 {
   "name": "unplugin-icons",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Access thousands of icons as components on-demand",
@@ -53,4 +53,4 @@ "homepage": "https://github.com/antfu/unplugin-icons",
     "dist",
-    "index.d.ts",
-    "client.d.ts"
+    "types",
+    "*.d.ts"
   ],
@@ -67,6 +67,7 @@ "scripts": {
     "@iconify/json-tools": "^1.0.10",
-    "unplugin": "^0.2.2"
+    "unplugin": "^0.2.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.7.0",
+    "@svgr/core": "^5.5.0",
     "@types/node": "^16.7.4",
@@ -83,5 +84,6 @@ "@typescript-eslint/eslint-plugin": "^4.29.3",
     "@iconify/json": "*",
+    "@svgr/core": "^5.5.0",
     "@vue/compiler-sfc": "^3.0.2",
     "vue-template-compiler": "^2.6.12",
-    "vue-template-es2015-compiler": "^1.9.1"
+    "vue-template-es2015-compiler": "^1.9.0"
   },
@@ -97,4 +99,7 @@ "peerDependenciesMeta": {
       "optional": true
+    },
+    "@svgr/core": {
+      "optional": true
     }
   }
 }

README.md

@@ -5,7 +5,50 @@ # unplugin-icons
 
-Access thousands of icons as components on-demand. Works for Vite, Webpack, Rollup, Nuxt, and more, powered by [unplugin](https://github.com/unjs/unplugin).
+Universal **on-demand** icons solution. 
 
-- 90+ iconsets powered by [Iconify](https://github.com/iconify/iconify)
+Works for
+
+- **Any** icon sets - 90+ popular iconsets, powered by [Iconify](https://github.com/iconify/iconify)
+- **Any** build tools - Vite, Webpack, Rollup, Nuxt, etc. powered by [unplugin](https://github.com/unjs/unplugin)
+- **Any** frameworks - React, Vue 3, Vue 2, and [contribute more](./src/core/compiles)
+- **Any** combinations of them!
 - [Browser the icons](https://icones.js.org/)
 
+*For **Any** I mean (almost) any* 😅
+
+> `vite-plugin-icons` has been renamed to `unplugin-icons`, see the [migration guide](#migrate-from-vite-plugin-icons).
+
+## Usage
+
+Import icons names with the prefix `~icons/` and use them directly as components. [Auto importing is also possible](#auto-importing).
+
+###### React
+
+```jsx
+import IconAccessibility from '~icons/carbon/accessibility'
+import IconAccountBox from '~icons/mdi/account-box'
+
+function App() {
+  return (
+    <div>
+      <IconAccessibility />
+      <IconAccountBox style={{ fontSize: '2em', color: 'red' }}/>
+    </div>
+  )
+}
+```
+
+###### Vue
+
+```html
+<script setup>
+import IconAccessibility from '~icons/carbon/accessibility'
+import IconAccountBox from '~icons/mdi/account-box'
+</script>
+
+<template>
+  <icon-accessibility/>
+  <icon-account-box style="font-size: 2em; color: red"/>
+</template>
+```
+
 ## Install
@@ -19,13 +62,30 @@
 
-Add it to `vite.config.js`
+### Build Tools
 
+<details>
+<summary>Vite</summary><br>
+
 ```ts
-// vite.config.js
-import Vue from '@vitejs/plugin-vue'
+// vite.config.ts
 import Icons from 'unplugin-icons/vite'
 
+export default defineConfig({
+  plugins: [
+    Icons({ /* options */ }),
+  ],
+})
+```
+
+<br></details>
+
+<details>
+<summary>Rollup</summary><br>
+
+```ts
+// rollup.config.js
+import Icons from 'unplugin-icons/rollup'
+
 export default {
   plugins: [
-    Vue(),
-    Icons()
+    Icons({ /* options */ }),
   ],
@@ -35,33 +95,197 @@ }
 
-```html
-<script setup>
-import IconAccessibility from 'virtual:icons/carbon/accessibility'
-import IconAccountBox from 'virtual:icons/mdi/account-box'
-</script>
+<br></details>
 
-<template>
-  <icon-accessibility/>
-  <icon-account-box style="font-size: 2em; color: red"/>
-</template>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [
+    require('unplugin-icons/webpack')({ /* options */ })
+  ]
+}
 ```
 
-## Options
+<br></details>
 
-You can set default styling for all icons. 
-The following config shows the default values of each option:
+<details>
+<summary>Nuxt</summary><br>
 
 ```ts
-// vite.config.js
-import Vue from '@vitejs/plugin-vue'
-import Icons from 'unplugin-icons/vite'
+// nuxt.config.js
+export default {
+  buildModules: [
+    ['unplugin-icons/nuxt', { /* options */ }],
+  ],
+}
+```
 
+> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
+
+<br></details>
+
+<details>
+<summary>Vue CLI</summary><br>
+
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [
+      require('unplugin-icons/webpack')({ /* options */ }),
+    ],
+  },
+}
+```
+
+<br></details>
+
+### Frameworks
+
+
+<details>
+<summary>Vue 3</summary><br>
+
+Vue 3 support requires peer dependency `@vue/compiler-sfc`:
+
+```bash
+npm i -D @vue/compiler-sfc
+```
+
+```ts
+Icons({ compiler: 'vue3' })
+```
+
+Type Declarations
+
+```jsonc
+// tsconfig.json
+{ 
+  "compilerOptions": {
+    "types": [
+      "unplugin-icons/types/vue",
+    ]
+  }
+}
+```
+
+<br></details>
+
+
+<details>
+<summary>Vue 2</summary><br>
+
+Vue 2 support requires peer dependency `vue-template-compiler`:
+
+```bash
+npm i -D vue-template-compiler
+```
+
+```ts
+Icons({ compiler: 'vue2' })
+```
+
+Type Declarations
+
+```jsonc
+// tsconfig.json
+{ 
+  "compilerOptions": {
+    "types": [
+      "unplugin-icons/types/vue",
+    ]
+  }
+}
+```
+
+<br></details>
+
+<details>
+<summary>React</summary><br>
+
+JSX support requires peer dependency `@svgr/core`:
+
+```bash
+npm i -D @svgr/core
+```
+
+```ts
+Icons({ compiler: 'jsx', jsx: 'react' })
+```
+
+Type Declarations
+
+```jsonc
+// tsconfig.json
+{ 
+  "compilerOptions": {
+    "types": [
+      "unplugin-icons/types/react",
+    ]
+  }
+}
+```
+
+<br></details>
+
+
+<details>
+<summary>Preact</summary><br>
+
+JSX support requires peer dependency `@svgr/core`:
+
+```bash
+npm i -D @svgr/core
+```
+
+```ts
+Icons({ compiler: 'jsx', jsx: 'preact' })
+```
+
+Type Declarations
+
+```jsonc
+// tsconfig.json
+{ 
+  "compilerOptions": {
+    "types": [
+      "unplugin-icons/types/preact",
+    ]
+  }
+}
+```
+
+<br></details>
+
+## Migrate from `vite-plugin-icons`
+
+`package.json`
+
+```diff
+{
+  "devDependencies": {
+-   "vite-plugin-icons": "*",
++   "unplugin-icons": "^0.6.0",
+  }
+}
+```
+
+`vite.config.json`
+
+```diff
+import Components from 'vite-plugin-components'
+- import Icons, { ViteIconsResolver } from 'vite-plugin-icons'
++ import Icons from 'unplugin-icons/vite'
++ import IconsResolver from 'unplugin-icons/resolver'
+
 export default {
   plugins: [
     Vue(),
-    Icons({
-      scale: 1.2, // Scale of icons against 1em
-      defaultStyle: '', // Style apply to icons
-      defaultClass: '', // Class names apply to icons
-      compiler: null, // Compiler 'vue2' or 'vue3', by default detected automatically
-    })
+    Components({
+      customComponentResolvers: IconsResolver(),
+    }),
+    Icons(),
   ],
@@ -71,2 +295,24 @@ }
 
+`*` - imports usage
+
+```diff
+- import IconComponent from 'virtual:vite-icons/collection/name'
++ import IconComponent from '~icons/collection/name'
+```
+
+## Options
+
+You can set default styling for all icons. 
+The following config shows the default values of each option:
+
+```ts
+Icons({
+  scale: 1.2, // Scale of icons against 1em
+  defaultStyle: '', // Style apply to icons
+  defaultClass: '', // Class names apply to icons
+  compiler: null, // 'vue2', 'vue3', 'jsx'
+  jsx: 'react' // 'react' or 'preact'
+})
+```
+
 ## Auto Importing
@@ -151,50 +397,2 @@
 
-## Vue 2 Support
-
-```bash
-npm i -D vue-template-compiler vite-plugin-vue2
-```
-
-And it just works.
-
-```ts
-// vite.config.js
-import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
-import Icons from 'unplugin-icons/vite'
-
-export default {
-  plugins: [
-    Vue2(),
-    Icons(),
-  ],
-}
-```
-
-## Comparsion with [Purge Icons](https://github.com/antfu/purge-icons)
-
-### `unplugin-icons`
-
-#### Pros
-
-- SSR/SSG friendly
-- On-demanded bunding
-- Works with Vue 3
-
-#### Cons
-
-- No Iconify runtime, no web fetching (string icon IDs)
-- Updates are sync with other content
-
-### `purge-icons`
-
-#### Pros
-
-- Iconify runtime
-- On-demanded bundling combining with runtime web fetching
-- Framework agnostic
-
-#### Cons
-- Icons show up after the Iconify runtime loaded
-- Not SSR/SSG friendly
-
 ## Sponsors
@@ -201,0 +399,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33895

increased by21.88%

Number of package files

43

increased by30.3%

Lines of code

714

increased by13.15%

Number of lines in readme file

406

increased by95.19%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

10

increased by11.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.2(transitive)

• + Added@babel/core@7.26.0(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-compilation-targets@7.25.9(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.0(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@svgr/babel-plugin-add-jsx-attribute@5.4.0(transitive)

• + Added@svgr/babel-plugin-remove-jsx-attribute@5.4.0(transitive)

• + Added@svgr/babel-plugin-remove-jsx-empty-expression@5.0.1(transitive)

• + Added@svgr/babel-plugin-replace-jsx-attribute-value@5.0.1(transitive)

• + Added@svgr/babel-plugin-svg-dynamic-title@5.4.0(transitive)

• + Added@svgr/babel-plugin-svg-em-dimensions@5.4.0(transitive)

• + Added@svgr/babel-plugin-transform-react-native-svg@5.4.0(transitive)

• + Added@svgr/babel-plugin-transform-svg-component@5.5.0(transitive)

• + Added@svgr/babel-preset@5.5.0(transitive)

• + Added@svgr/core@5.5.0(transitive)

• + Added@svgr/hast-util-to-babel-ast@5.5.0(transitive)

• + Added@svgr/plugin-jsx@5.5.0(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedbrowserslist@4.24.2(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedcamelcase@6.3.0(transitive)

• + Addedcaniuse-lite@1.0.30001680(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedelectron-to-chromium@1.5.57(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.18(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedsvg-parser@2.0.4(transitive)

• + Addedupdate-browserslist-db@1.1.1(transitive)

• + Addedyallist@3.1.1(transitive)

• + Addedyaml@1.10.2(transitive)

• Updatedunplugin@^0.2.3