unplugin-icons - npm Package Compare versions

Comparing version 0.14.1 to 0.14.2

dist/esbuild.d.ts

@@ -1,6 +0,7 @@
-import { Options } from './types';
+import * as unplugin from 'unplugin';
+import { Options } from './types.js';
 import '@antfu/utils';
 
-declare const _default: (options?: Options | undefined) => Plugin$2;
+declare const _default: (options?: Options | undefined) => unplugin.EsbuildPlugin;
 
 export { _default as default };

dist/esbuild.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAWO6LPR4js = require('./chunk-AWO6LPR4.js');
+var _chunkKPZ5JDNIjs = require('./chunk-KPZ5JDNI.js');
 require('./chunk-GGNOJ77I.js');
 
 // src/esbuild.ts
-var esbuild_default = _chunkAWO6LPR4js.src_default.esbuild;
+var esbuild_default = _chunkKPZ5JDNIjs.src_default.esbuild;
 
@@ -9,0 +9,0 @@

dist/index.d.ts

@@ -1,8 +0,8 @@
-import * as _unplugin from 'unplugin';
-import { Options } from './types';
-export { CustomCompiler, CustomIconLoader, IconCustomizer, InlineCollection, Options, ResolvedOptions } from './types';
+import * as unplugin$1 from 'unplugin';
+import { Options } from './types.js';
+export { CustomCompiler, CustomIconLoader, IconCustomizer, InlineCollection, Options, ResolvedOptions } from './types.js';
 import '@antfu/utils';
 
-declare const unplugin: _unplugin.UnpluginInstance<Options>;
+declare const unplugin: unplugin$1.UnpluginInstance<Options>;
 
 export { unplugin as default };

dist/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAWO6LPR4js = require('./chunk-AWO6LPR4.js');
+var _chunkKPZ5JDNIjs = require('./chunk-KPZ5JDNI.js');
 require('./chunk-GGNOJ77I.js');
 
 
-exports.default = _chunkAWO6LPR4js.src_default;
+exports.default = _chunkKPZ5JDNIjs.src_default;

dist/loaders.d.ts

 import { Awaitable } from '@antfu/utils';
-import { CustomIconLoader } from './types';
+import { CustomIconLoader } from './types.js';
 
@@ -4,0 +4,0 @@ declare function FileSystemIconLoader(dir: string, transform?: (svg: string) => Awaitable<string>): CustomIconLoader;

dist/nuxt.d.ts

@@ -1,2 +0,2 @@
-import { Options } from './types';
+import { Options } from './types.js';
 import '@antfu/utils';
@@ -3,0 +3,0 @@

dist/nuxt.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAWO6LPR4js = require('./chunk-AWO6LPR4.js');
+var _chunkKPZ5JDNIjs = require('./chunk-KPZ5JDNI.js');
 require('./chunk-GGNOJ77I.js');
@@ -10,7 +10,7 @@
     config.plugins = config.plugins || [];
-    config.plugins.unshift(_chunkAWO6LPR4js.src_default.webpack(options));
+    config.plugins.unshift(_chunkKPZ5JDNIjs.src_default.webpack(options));
   });
   this.nuxt.hook("vite:extend", async (vite) => {
     vite.config.plugins = vite.config.plugins || [];
-    vite.config.plugins.push(_chunkAWO6LPR4js.src_default.vite(options));
+    vite.config.plugins.push(_chunkKPZ5JDNIjs.src_default.vite(options));
   });
@@ -17,0 +17,0 @@ }

dist/rollup.d.ts

@@ -1,6 +0,7 @@
-import { Options } from './types';
+import * as rollup from 'rollup';
+import { Options } from './types.js';
 import '@antfu/utils';
 
-declare const _default: (options?: Options | undefined) => Plugin;
+declare const _default: (options?: Options | undefined) => rollup.Plugin;
 
 export { _default as default };

dist/rollup.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAWO6LPR4js = require('./chunk-AWO6LPR4.js');
+var _chunkKPZ5JDNIjs = require('./chunk-KPZ5JDNI.js');
 require('./chunk-GGNOJ77I.js');
 
 // src/rollup.ts
-var rollup_default = _chunkAWO6LPR4js.src_default.rollup;
+var rollup_default = _chunkKPZ5JDNIjs.src_default.rollup;
 
@@ -9,0 +9,0 @@

dist/types.d.ts

@@ -41,2 +41,13 @@ import { Awaitable } from '@antfu/utils';
     /**
+     * Transform raw `svg`.
+     *
+     * **WARNING**: `transform` will be only applied when using `custom` icon collection.
+     *
+     * @param svg The loaded `svg`
+     * @param collection The name of the collection
+     * @param icon The name of the icon
+     * @return The transformed `svg`.
+     */
+    transform?: (svg: string, collection: string, icon: string) => Awaitable<string>;
+    /**
      * Auto install icon sources package when the usages is detected
@@ -43,0 +54,0 @@ *

dist/vite.d.ts

@@ -1,6 +0,7 @@
-import { Options } from './types';
+import * as unplugin from 'unplugin';
+import { Options } from './types.js';
 import '@antfu/utils';
 
-declare const _default: (options?: Options | undefined) => Plugin$1;
+declare const _default: (options?: Options | undefined) => unplugin.VitePlugin;
 
 export { _default as default };

dist/vite.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAWO6LPR4js = require('./chunk-AWO6LPR4.js');
+var _chunkKPZ5JDNIjs = require('./chunk-KPZ5JDNI.js');
 require('./chunk-GGNOJ77I.js');
 
 // src/vite.ts
-var vite_default = _chunkAWO6LPR4js.src_default.vite;
+var vite_default = _chunkKPZ5JDNIjs.src_default.vite;
 
@@ -9,0 +9,0 @@

dist/webpack.d.ts

@@ -1,6 +0,6 @@
-import { Options } from './types';
+import { Options } from './types.js';
 import '@antfu/utils';
 
-declare const _default: (options?: Options | undefined) => WebpackPluginInstance;
+declare const _default: (options?: Options | undefined) => any;
 
 export { _default as default };

dist/webpack.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAWO6LPR4js = require('./chunk-AWO6LPR4.js');
+var _chunkKPZ5JDNIjs = require('./chunk-KPZ5JDNI.js');
 require('./chunk-GGNOJ77I.js');
 
 // src/webpack.ts
-var webpack_default = _chunkAWO6LPR4js.src_default.webpack;
+var webpack_default = _chunkKPZ5JDNIjs.src_default.webpack;
 
@@ -9,0 +9,0 @@

package.json

 {
   "name": "unplugin-icons",
-  "version": "0.14.1",
+  "version": "0.14.2",
+  "packageManager": "pnpm@7.0.0",
   "description": "Access thousands of icons as components on-demand universally",
@@ -16,7 +17,8 @@ "homepage": "https://github.com/antfu/unplugin-icons",
   "module": "dist/index.mjs",
-  "types": "index.d.ts",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
     },
@@ -26,23 +28,29 @@ "./*": "./*",
       "require": "./dist/esbuild.js",
-      "import": "./dist/esbuild.mjs"
+      "import": "./dist/esbuild.mjs",
+      "types": "./dist/esbuild.d.ts"
     },
     "./loaders": {
       "require": "./dist/loaders.js",
-      "import": "./dist/loaders.mjs"
+      "import": "./dist/loaders.mjs",
+      "types": "./dist/loaders.d.ts"
     },
     "./nuxt": {
       "require": "./dist/nuxt.js",
-      "import": "./dist/nuxt.mjs"
+      "import": "./dist/nuxt.mjs",
+      "types": "./dist/nuxt.d.ts"
     },
     "./resolver": {
       "require": "./dist/resolver.js",
-      "import": "./dist/resolver.mjs"
+      "import": "./dist/resolver.mjs",
+      "types": "./dist/resolver.d.ts"
     },
     "./rollup": {
       "require": "./dist/rollup.js",
-      "import": "./dist/rollup.mjs"
+      "import": "./dist/rollup.mjs",
+      "types": "./dist/rollup.d.ts"
     },
     "./types": {
       "require": "./dist/types.js",
-      "import": "./dist/types.mjs"
+      "import": "./dist/types.mjs",
+      "types": "./dist/types.d.ts"
     },
@@ -75,9 +83,20 @@ "./types/preact": {
       "require": "./dist/vite.js",
-      "import": "./dist/vite.mjs"
+      "import": "./dist/vite.mjs",
+      "types": "./dist/vite.d.ts"
     },
     "./webpack": {
       "require": "./dist/webpack.js",
-      "import": "./dist/webpack.mjs"
+      "import": "./dist/webpack.mjs",
+      "types": "./dist/webpack.d.ts"
     }
   },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/index.d.ts",
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
   "files": [
@@ -120,28 +139,28 @@ "dist",
     "@antfu/install-pkg": "^0.1.0",
-    "@antfu/utils": "^0.5.0",
-    "@iconify/utils": "^1.0.30",
+    "@antfu/utils": "^0.5.1",
+    "@iconify/utils": "^1.0.32",
     "debug": "^4.3.4",
     "kolorist": "^1.5.1",
     "local-pkg": "^0.4.1",
-    "unplugin": "^0.5.2"
+    "unplugin": "^0.6.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.18.9",
-    "@iconify/json": "^2.1.17",
-    "@iconify/types": "^1.0.13",
+    "@antfu/eslint-config": "^0.22.0",
+    "@iconify/json": "^2.1.35",
+    "@iconify/types": "^1.1.0",
     "@svgr/core": "^6.2.1",
     "@types/debug": "^4.1.7",
-    "@types/node": "^17.0.21",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@vue/compiler-sfc": "^3.2.31",
+    "@types/node": "^17.0.31",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@vue/compiler-sfc": "^3.2.33",
     "bumpp": "^7.1.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.11.0",
+    "eslint": "^8.14.0",
     "esno": "^0.14.1",
-    "rollup": "^2.70.1",
-    "tsup": "^5.12.1",
-    "typescript": "^4.6.2",
-    "vite": "^2.8.6",
-    "vitest": "^0.7.6"
+    "rollup": "^2.71.1",
+    "tsup": "^5.12.6",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.7",
+    "vitest": "^0.10.1"
   }
 }

README.md

@@ -100,3 +100,3 @@ # unplugin-icons
   // expiremental
-  autoInstall: true
+  autoInstall: true,
 })
@@ -152,4 +152,4 @@ ```
   plugins: [
-    require('unplugin-icons/webpack')({ /* options */ })
-  ]
+    require('unplugin-icons/webpack')({ /* options */ }),
+  ],
 }
@@ -197,2 +197,3 @@ ```
 // svelte.config.js
+import adapter from '@sveltejs/adapter-auto'
 import preprocess from 'svelte-preprocess'
@@ -207,4 +208,3 @@ import Icons from 'unplugin-icons/vite'
   kit: {
-    // hydrate the <div id="svelte"> element in src/app.html
-    target: '#svelte',
+    adapter: adapter(),
     vite: {
@@ -272,7 +272,7 @@ plugins: [
       }),
-    );
+    )
 
-    return config;
+    return config
   },
-};
+}
 ```
@@ -284,2 +284,4 @@
 
+<!-- eslint-skip -->
+
 ```ts
@@ -335,5 +337,7 @@ import IconArrowRight from '~icons/dashicons/arrow-right.jsx';
 
+<!-- eslint-skip -->
+
 ```jsonc
 // tsconfig.json
-{ 
+{
   "compilerOptions": {
@@ -365,2 +369,4 @@ "types": [
 
+<!-- eslint-skip -->
+
 ```jsonc
@@ -394,2 +400,4 @@ // tsconfig.json
 
+<!-- eslint-skip -->
+
 ```jsonc
@@ -424,2 +432,4 @@ // tsconfig.json
 
+<!-- eslint-skip -->
+
 ```jsonc
@@ -449,2 +459,4 @@ // tsconfig.json
 
+<!-- eslint-skip -->
+
 ```jsonc
@@ -473,4 +485,5 @@ // tsconfig.json
 
-For Svelte Kit, on `src/global.d.ts` file:
-```html
+For Svelte Kit, on `src/app.d.ts` file:
+
+```js
 /// <reference types="@sveltejs/kit" />
@@ -481,3 +494,4 @@ /// <reference types="unplugin-icons/types/svelte" />
 For Svelte + Vite, on `src/vite-env.d.ts` file:
-```html
+
+```js
 /// <reference types="svelte" />
@@ -498,5 +512,6 @@ /// <reference types="vite/client" />
 <script setup lang='ts'>
-  import RawMdiAlarmOff from '~icons/mdi/alarm-off?raw&width=4em&height=4em'
-  import RawMdiAlarmOff2 from '~icons/mdi/alarm-off?raw&width=1em&height=1em'
+import RawMdiAlarmOff from '~icons/mdi/alarm-off?raw&width=4em&height=4em'
+import RawMdiAlarmOff2 from '~icons/mdi/alarm-off?raw&width=1em&height=1em'
 </script>
+
 <template>
@@ -511,4 +526,4 @@ <!-- raw example -->
   <!-- svg example -->
-  <span v-html="RawMdiAlarmOff"></span>
-  <span v-html="RawMdiAlarmOff2"></span>
+  <span v-html="RawMdiAlarmOff" />
+  <span v-html="RawMdiAlarmOff2" />
 </template>
@@ -526,11 +541,11 @@ ```
 // loader helpers
-import { FileSystemIconLoader } from 'unplugin-icons/loaders' 
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 
-Icons({ 
+Icons({
   customCollections: {
     // key as the collection name
     'my-icons': {
-      'account': '<svg><!-- ... --></svg>',
+      account: '<svg><!-- ... --></svg>',
       // load your custom icon lazily
-      'settings': () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
+      settings: () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
       /* ... */
@@ -540,3 +555,3 @@ },
       // your custom loader here. Do whatever you want.
-      // for example, fetch from a remote server: 
+      // for example, fetch from a remote server:
       return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
@@ -549,5 +564,5 @@ },
       './assets/icons',
-      svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
+      svg => svg.replace(/^<svg /, '<svg fill="currentColor" '),
     ),
-  }
+  },
 })
@@ -578,3 +593,3 @@ ```
     'my-yet-other-icons',
-  ]
+  ],
 })
@@ -598,11 +613,11 @@ ```
 // loader helpers
-import { FileSystemIconLoader } from 'unplugin-icons/loaders' 
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 
-Icons({ 
+Icons({
   customCollections: {
     // key as the collection name
     'my-icons': {
-      'account': '<svg><!-- ... --></svg>',
+      account: '<svg><!-- ... --></svg>',
       // load your custom icon lazily
-      'settings': () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
+      settings: () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
       /* ... */
@@ -612,3 +627,3 @@ },
       // your custom loader here. Do whatever you want.
-      // for example, fetch from a remote server: 
+      // for example, fetch from a remote server:
       return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
@@ -621,22 +636,22 @@ },
       './assets/icons',
-      svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
+      svg => svg.replace(/^<svg /, '<svg fill="currentColor" '),
     ),
   },
   iconCustomizer(collection, icon, props) {
-    // customize all icons in this collection  
+    // customize all icons in this collection
     if (collection === 'my-other-icons') {
-        props.width = '4em'
-        props.height = '4em'
-    }  
-    // customize this icon in this collection  
+      props.width = '4em'
+      props.height = '4em'
+    }
+    // customize this icon in this collection
     if (collection === 'my-icons' && icon === 'account') {
-        props.width = '6em'
-        props.height = '6em'
-    }  
-    // customize this @iconify icon in this collection  
+      props.width = '6em'
+      props.height = '6em'
+    }
+    // customize this @iconify icon in this collection
     if (collection === 'mdi' && icon === 'account') {
-        props.width = '2em'
-        props.height = '2em'
-    }  
-  }
+      props.width = '2em'
+      props.height = '2em'
+    }
+  },
 })
@@ -663,2 +678,32 @@ ```
 
+## Global Custom Icon Transformation
+
+From version `0.14.2`, when loading your custom icons, you can transform them, for example adding `fill` attribute with `currentColor`:
+```ts
+Icons({
+  customCollections: {
+    // key as the collection name
+    'my-icons': {
+      account: '<svg><!-- ... --></svg>',
+      /* ... */
+    },
+  },
+  transform(svg, collection, icon) {
+    // apply fill to this icon on this collection
+    if (collection === 'my-icons' && icon === 'account')
+      return svg.replace(/^<svg /, '<svg fill="currentColor" ')
+
+    return svg
+  },
+})
+```
+
+## Advanced Custom Icon Set Cleanup
+
+When using this plugin with your custom icons, consider using a cleanup process similar to that done by [Iconify](https://iconify.design/) for any icons sets. All the tools you need are available in [Iconify Tools](https://docs.iconify.design/tools/tools2/).
+
+You can check this repo, using `unplugin-icons` on a `SvelteKit` project: https://github.com/iconify/tools/tree/main/%40iconify-demo/unplugin-svelte.
+
+Read [Cleaning up icons](https://docs.iconify.design/articles/cleaning-up-icons/) article from [Iconify](https://iconify.design/) for more details.
+
 ## Migrate from `vite-plugin-icons`
@@ -718,3 +763,3 @@
   compiler: null, // 'vue2', 'vue3', 'jsx'
-  jsx: 'react' // 'react' or 'preact'
+  jsx: 'react', // 'react' or 'preact'
 })
@@ -745,3 +790,3 @@ ```
         IconsResolver(),
-      ]
+      ],
     }),
@@ -784,8 +829,8 @@ Icons(),
           prefix: 'Icon',
-          extension: 'jsx'
-        })
+          extension: 'jsx',
+        }),
       ],
     }),
     Icons({
-      compiler: 'jsx' // or 'solid'
+      compiler: 'jsx', // or 'solid'
     }),
@@ -798,2 +843,4 @@ ],
 
+<!-- eslint-disable react/jsx-no-undef -->
+
 ```js
@@ -826,3 +873,3 @@ export function Component() {
 IconsResolver({
-  prefix: 'icon' // <--
+  prefix: 'icon', // <--
 })
@@ -843,3 +890,3 @@ ```
   // this is optional, default enabling all the collections supported by Iconify
-  enabledCollections: ['mdi']
+  enabledCollections: ['mdi'],
 })
@@ -865,4 +912,4 @@ ```
     park: 'icon-park',
-    fas:  'fa-solid',
-    ...
+    fas: 'fa-solid',
+    // ...
   }
@@ -869,0 +916,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

63863

increased by3.34%

Lines of code

1123

increased by0.72%

Number of lines in readme file

907

increased by5.47%

Worsened metrics

Number of package files

43

decreased by-15.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedunplugin@0.6.3(transitive)

• - Removedunplugin@0.5.2(transitive)

• Updated@antfu/utils@^0.5.1

• Updated@iconify/utils@^1.0.32

• Updatedunplugin@^0.6.2