unplugin-icons - npm Package Compare versions

Comparing version 0.12.23 to 0.13.0

dist/index.d.ts

 import * as _unplugin from 'unplugin';
 import { Options } from './types';
-export { CustomCompiler, CustomIconLoader, InlineCollection, Options, ResolvedOptions } from './types';
+export { CustomCompiler, CustomIconLoader, IconCustomizer, InlineCollection, Options, ResolvedOptions } from './types';
 import '@antfu/utils';
@@ -5,0 +5,0 @@

dist/index.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk4WBTENBZjs = require('./chunk-4WBTENBZ.js');
-require('./chunk-WOL7QKXN.js');
+var _chunk6LRP52NFjs = require('./chunk-6LRP52NF.js');
+require('./chunk-QYXOJ5JT.js');
 require('./chunk-GGNOJ77I.js');
-require('./chunk-NP34SPMF.js');
 
 
-exports.default = _chunk4WBTENBZjs.src_default;
+exports.default = _chunk6LRP52NFjs.src_default;

dist/loaders.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkWOL7QKXNjs = require('./chunk-WOL7QKXN.js');
-require('./chunk-NP34SPMF.js');
+var _chunkQYXOJ5JTjs = require('./chunk-QYXOJ5JT.js');
 
@@ -13,4 +12,4 @@ // src/loaders.ts
       `${dir}/${name}.svg`,
-      `${dir}/${_chunkWOL7QKXNjs.camelize.call(void 0, name)}.svg`,
-      `${dir}/${_chunkWOL7QKXNjs.pascalize.call(void 0, name)}.svg`
+      `${dir}/${_chunkQYXOJ5JTjs.camelize.call(void 0, name)}.svg`,
+      `${dir}/${_chunkQYXOJ5JTjs.pascalize.call(void 0, name)}.svg`
     ];
@@ -17,0 +16,0 @@ for (const path of pathes) {

dist/nuxt.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk4WBTENBZjs = require('./chunk-4WBTENBZ.js');
-require('./chunk-WOL7QKXN.js');
+var _chunk6LRP52NFjs = require('./chunk-6LRP52NF.js');
+require('./chunk-QYXOJ5JT.js');
 require('./chunk-GGNOJ77I.js');
-require('./chunk-NP34SPMF.js');
 
@@ -12,7 +11,7 @@ // src/nuxt.ts
     config.plugins = config.plugins || [];
-    config.plugins.unshift(_chunk4WBTENBZjs.src_default.webpack(options));
+    config.plugins.unshift(_chunk6LRP52NFjs.src_default.webpack(options));
   });
   this.nuxt.hook("vite:extend", async (vite) => {
     vite.config.plugins = vite.config.plugins || [];
-    vite.config.plugins.push(_chunk4WBTENBZjs.src_default.vite(options));
+    vite.config.plugins.push(_chunk6LRP52NFjs.src_default.vite(options));
   });
@@ -19,0 +18,0 @@ }

dist/resolver.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkWOL7QKXNjs = require('./chunk-WOL7QKXN.js');
-require('./chunk-NP34SPMF.js');
+var _chunkQYXOJ5JTjs = require('./chunk-QYXOJ5JT.js');
 
@@ -10,3 +9,3 @@ // src/resolver.ts
 // src/core/collections.ts
-var collections = ["mdi", "mdi-light", "ic", "ph", "icon-park-outline", "icon-park", "uil", "bx", "ri", "la", "iconoir", "jam", "ion", "bi", "clarity", "carbon", "cil", "gg", "tabler", "teenyicons", "fa-solid", "fa-regular", "vaadin", "icomoon-free", "eva", "pixelarticons", "majesticons", "ci", "eos-icons", "dashicons", "entypo", "zondicons", "flat-color-icons", "octicon", "codicon", "ant-design", "lucide", "fe", "radix-icons", "line-md", "system-uicons", "akar-icons", "uiw", "uim", "uit", "uis", "gridicons", "mono-icons", "heroicons-outline", "heroicons-solid", "file-icons", "mi", "ps", "el", "foundation", "typcn", "subway", "raphael", "icons8", "wpf", "iwwa", "topcoat", "ei", "bytesize", "fluent", "grommet-icons", "pepicons", "maki", "oi", "et", "vscode-icons", "fontisto", "fa", "zmdi", "whh", "si-glyph", "ls", "simple-line-icons", "flat-ui", "vs", "websymbol", "il", "bpmn", "fontelico", "feather", "noto", "noto-v1", "twemoji", "openmoji", "emojione", "emojione-monotone", "emojione-v1", "fxemoji", "logos", "cib", "simple-icons", "fa-brands", "brandico", "entypo-social", "cryptocurrency", "gis", "map", "geo", "cif", "fad", "wi", "healthicons", "medical-icon"];
+var collections = ["mdi", "mdi-light", "ic", "ph", "icon-park-outline", "icon-park", "uil", "bx", "ri", "la", "iconoir", "jam", "ion", "bi", "clarity", "carbon", "cil", "gg", "tabler", "teenyicons", "fa-solid", "fa-regular", "vaadin", "icomoon-free", "eva", "pixelarticons", "majesticons", "ci", "eos-icons", "dashicons", "entypo", "zondicons", "flat-color-icons", "octicon", "codicon", "ant-design", "lucide", "fe", "radix-icons", "line-md", "system-uicons", "akar-icons", "uiw", "uim", "uit", "uis", "gridicons", "mono-icons", "heroicons-outline", "heroicons-solid", "file-icons", "mi", "ps", "el", "foundation", "typcn", "subway", "raphael", "icons8", "wpf", "iwwa", "topcoat", "ei", "bytesize", "fluent", "grommet-icons", "pepicons", "maki", "oi", "et", "vscode-icons", "fontisto", "fa", "zmdi", "whh", "si-glyph", "ls", "simple-line-icons", "flat-ui", "vs", "websymbol", "il", "bpmn", "fontelico", "feather", "noto", "noto-v1", "twemoji", "openmoji", "emojione", "emojione-monotone", "emojione-v1", "fxemoji", "logos", "cib", "simple-icons", "fa-brands", "brandico", "entypo-social", "cryptocurrency", "gis", "map", "geo", "cif", "fad", "wi", "healthicons", "medical-icon", "ep"];
 
@@ -23,3 +22,3 @@ // src/resolver.ts
   } = options;
-  const prefix = rawPrefix ? `${_chunkWOL7QKXNjs.camelToKebab.call(void 0, rawPrefix)}-` : "";
+  const prefix = rawPrefix ? `${_chunkQYXOJ5JTjs.camelToKebab.call(void 0, rawPrefix)}-` : "";
   const ext = extension ? extension.startsWith(".") ? extension : `.${extension}` : "";
@@ -33,3 +32,3 @@ const collections2 = _utils.uniq.call(void 0, [
   return (name) => {
-    const kebab = _chunkWOL7QKXNjs.camelToKebab.call(void 0, name);
+    const kebab = _chunkQYXOJ5JTjs.camelToKebab.call(void 0, name);
     if (!kebab.startsWith(prefix))
@@ -36,0 +35,0 @@ return;

dist/rollup.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk4WBTENBZjs = require('./chunk-4WBTENBZ.js');
-require('./chunk-WOL7QKXN.js');
+var _chunk6LRP52NFjs = require('./chunk-6LRP52NF.js');
+require('./chunk-QYXOJ5JT.js');
 require('./chunk-GGNOJ77I.js');
-require('./chunk-NP34SPMF.js');
 
 // src/rollup.ts
-var rollup_default = _chunk4WBTENBZjs.src_default.rollup;
+var rollup_default = _chunk6LRP52NFjs.src_default.rollup;
 
@@ -11,0 +10,0 @@

dist/types.d.ts

@@ -10,2 +10,3 @@ import { Awaitable } from '@antfu/utils';
 declare type CustomIconLoader = (name: string) => Awaitable<string | undefined>;
+declare type IconCustomizer = (collection: string, icon: string, props: Record<string, string>) => Awaitable<void>;
 declare type InlineCollection = Record<string, string | (() => Awaitable<string | undefined>)>;
@@ -37,2 +38,6 @@
     /**
+     * Icon customizer
+     */
+    iconCustomizer?: IconCustomizer;
+    /**
      * Auto install icon sources package when the usages is detected
@@ -81,2 +86,2 @@ *
 
-export { CustomCompiler, CustomIconLoader, InlineCollection, Options, ResolvedOptions };
+export { CustomCompiler, CustomIconLoader, IconCustomizer, InlineCollection, Options, ResolvedOptions };

dist/types.js

 "use strict";require('./chunk-GGNOJ77I.js');
-require('./chunk-NP34SPMF.js');

dist/vite.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk4WBTENBZjs = require('./chunk-4WBTENBZ.js');
-require('./chunk-WOL7QKXN.js');
+var _chunk6LRP52NFjs = require('./chunk-6LRP52NF.js');
+require('./chunk-QYXOJ5JT.js');
 require('./chunk-GGNOJ77I.js');
-require('./chunk-NP34SPMF.js');
 
 // src/vite.ts
-var vite_default = _chunk4WBTENBZjs.src_default.vite;
+var vite_default = _chunk6LRP52NFjs.src_default.vite;
 
@@ -11,0 +10,0 @@

dist/webpack.js

 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk4WBTENBZjs = require('./chunk-4WBTENBZ.js');
-require('./chunk-WOL7QKXN.js');
+var _chunk6LRP52NFjs = require('./chunk-6LRP52NF.js');
+require('./chunk-QYXOJ5JT.js');
 require('./chunk-GGNOJ77I.js');
-require('./chunk-NP34SPMF.js');
 
 // src/webpack.ts
-var webpack_default = _chunk4WBTENBZjs.src_default.webpack;
+var webpack_default = _chunk6LRP52NFjs.src_default.webpack;
 
@@ -11,0 +10,0 @@

package.json

 {
   "name": "unplugin-icons",
-  "version": "0.12.23",
+  "version": "0.13.0",
   "description": "Access thousands of icons as components on-demand universally",
@@ -86,13 +86,13 @@ "homepage": "https://github.com/antfu/unplugin-icons",
     "example:dev": "npm -C examples/vite-vue3 run dev",
-    "lint": "eslint --ext .ts,.js,.vue",
+    "lint": "eslint --ext .ts,.js,.vue .",
     "prepublishOnly": "npm run build",
     "release": "npx bumpp --commit --tag --push && npm publish",
-    "test": "jest"
+    "test": "vitest"
   },
   "dependencies": {
     "@antfu/install-pkg": "^0.1.0",
-    "@antfu/utils": "^0.3.0",
+    "@antfu/utils": "^0.4.0",
     "@iconify/utils": "^1.0.20",
     "debug": "^4.3.3",
-    "kolorist": "^1.5.0",
+    "kolorist": "^1.5.1",
     "local-pkg": "^0.4.0",
@@ -102,22 +102,19 @@ "unplugin": "^0.2.21"
   "devDependencies": {
-    "@antfu/eslint-config": "^0.11.1",
-    "@iconify/json": "^2.0.3",
+    "@antfu/eslint-config": "^0.14.0",
+    "@iconify/json": "^2.0.15",
     "@iconify/types": "^1.0.12",
-    "@svgr/core": "^6.0.0",
+    "@svgr/core": "^6.1.2",
     "@types/debug": "^4.1.7",
-    "@types/jest": "^27.0.3",
-    "@types/node": "^16.11.11",
-    "@typescript-eslint/eslint-plugin": "^5.5.0",
-    "@vue/compiler-sfc": "^3.2.23",
+    "@types/node": "^17.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@vue/compiler-sfc": "^3.2.26",
     "bumpp": "^7.1.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.3.0",
-    "eslint-plugin-jest": "^25.3.0",
-    "esno": "^0.12.1",
-    "jest": "^27.4.0",
-    "rollup": "^2.60.2",
-    "ts-jest": "^27.0.7",
-    "tsup": "^5.10.0",
-    "typescript": "^4.5.2",
-    "vite": "^2.6.14"
+    "eslint": "^8.5.0",
+    "esno": "^0.13.0",
+    "rollup": "^2.62.0",
+    "tsup": "^5.11.9",
+    "typescript": "^4.5.4",
+    "vite": "^2.7.6",
+    "vitest": "^0.0.113"
   },
@@ -124,0 +121,0 @@ "peerDependencies": {

README.md

@@ -421,4 +421,6 @@ # unplugin-icons
 
-From v0.11, you can now load your own icons!
+From `v0.11`, you can now load your own icons!
 
+From `v0.12.24` you can also provide a transform callback to `FileSystemIconLoader`.
+
 ```ts
@@ -445,3 +447,7 @@ import { promises as fs } from 'fs'
     // files under `./assets/icons` with `.svg` extension will be loaded as it's file name
-    'my-yet-other-icons': FileSystemIconLoader('./assets/icons'),
+    // you can also provide a transform callback to change each icon (optional)
+    'my-yet-other-icons': FileSystemIconLoader(
+      './assets/icons',
+      svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
+    ),
   }
@@ -479,2 +485,77 @@ })
 
+## Icon customizer
+
+From version `v0.12.24` you can also customize each icon using `iconCustomizer` configuration option or using query params when importing them.
+
+The `query` param will take precedence over `iconCustomizer` and `iconCustomizer`  over `configuration`.
+
+The `iconCustomizer` and `query` params will be applied to any collection, that is, for each icon from `custom` loader, `inlined` on `customCollections` or from `@iconify`. 
+
+For example, you can configure `iconCustomizer` to change all icons for a collection or individual icons on a collection:
+
+```ts
+import { promises as fs } from 'fs'
+// loader helpers
+import { FileSystemIconLoader } from 'unplugin-icons/loaders' 
+
+Icons({ 
+  customCollections: {
+    // key as the collection name
+    'my-icons': {
+      'account': '<svg><!-- ... --></svg>',
+      // load your custom icon lazily
+      'settings': () => fs.readFile('./path/to/my-icon.svg', 'utf-8'),
+      /* ... */
+    },
+    'my-other-icons': async (iconName) => {
+      // your custom loader here. Do whatever you want.
+      // for example, fetch from a remote server: 
+      return await fetch(`https://example.com/icons/${iconName}.svg`).then(res => res.text())
+    },
+    // a helper to load icons from the file system
+    // files under `./assets/icons` with `.svg` extension will be loaded as it's file name
+    // you can also provide a transform callback to change each icon (optional)
+    'my-yet-other-icons': FileSystemIconLoader(
+      './assets/icons',
+      svg => svg.replace(/^<svg /, '<svg fill="currentColor" ')
+    ),
+  },
+  iconCustomizer(collection, icon, props) {
+    // customize all icons in this collection  
+    if (collection === 'my-other-icons') {
+        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  
+    if (collection === 'mdi' && icon === 'account') {
+        props.width = '2em'
+        props.height = '2em'
+    }  
+  }
+})
+```
+
+or you can use `query` params to apply to individual icons:
+```vue
+<script setup lang='ts'>
+import MdiAlarmOff from 'virtual:icons/mdi/alarm-off?width=4em&height=4em'
+import MdiAlarmOff2 from 'virtual:icons/mdi/alarm-off?width=1em&height=1em'
+</script>
+<template>
+  <!-- width=4em and width=4em -->
+  <mdi-alarm-off />
+  <!-- width=4em and width=4em -->
+  <MdiAlarmOff />
+  <!-- width=1em and width=1em -->
+  <MdiAlarmOff2 />
+</template>
+```
+
+See `src/App.vue` component and `vite.config.ts` configuration on `vite-vue3` example project.
+
 ## Migrate from `vite-plugin-icons`
@@ -481,0 +562,0 @@

types/preact.d.ts

 declare module 'virtual:icons/*' {
-  import { SVGProps, JSX } from 'preact'
+  import type { JSX, SVGProps } from 'preact'
   const component: (props: SVGProps<SVGSVGElement>) => JSX.Element
@@ -7,5 +7,5 @@ export default component
 declare module '~icons/*' {
-  import { SVGProps, JSX } from 'preact'
+  import type { JSX, SVGProps } from 'preact'
   const component: (props: SVGProps<SVGSVGElement>) => JSX.Element
   export default component
 }

types/react.d.ts

 declare module 'virtual:icons/*' {
-  import React, { SVGProps } from 'react'
+  import type { SVGProps } from 'react'
+  import type React from 'react'
   const component: (props: SVGProps<SVGSVGElement>) => React.ReactElement
@@ -7,5 +8,6 @@ export default component
 declare module '~icons/*' {
-  import React, { SVGProps } from 'react'
+  import type { SVGProps } from 'react'
+  import type React from 'react'
   const component: (props: SVGProps<SVGSVGElement>) => React.ReactElement
   export default component
 }

types/solid.d.ts

 declare module 'virtual:icons/*' {
-  import { JSX, ComponentProps } from 'solid-js'
+  import type { ComponentProps, JSX } from 'solid-js'
   const component: (props: ComponentProps<'svg'>) => JSX.Element
@@ -7,5 +7,5 @@ export default component
 declare module '~icons/*' {
-  import { JSX, ComponentProps } from 'solid-js'
+  import type { ComponentProps, JSX } from 'solid-js'
   const component: (props: ComponentProps<'svg'>) => JSX.Element
   export default component
 }

types/vue3.d.ts

 declare module 'virtual:icons/*' {
-  import { FunctionalComponent, SVGAttributes } from 'vue'
+  import type { FunctionalComponent, SVGAttributes } from 'vue'
   const component: FunctionalComponent<SVGAttributes>
@@ -7,5 +7,5 @@ export default component
 declare module '~icons/*' {
-  import { FunctionalComponent, SVGAttributes } from 'vue'
+  import type { FunctionalComponent, SVGAttributes } from 'vue'
   const component: FunctionalComponent<SVGAttributes>
   export default component
 }

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

72002

increased by6.73%

Dev dependency count

17

decreased by-15%

Lines of code

1435

increased by1.85%

Number of lines in readme file

773

increased by11.71%

Worsened metrics

Number of package files

49

decreased by-3.92%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@antfu/utils@0.4.0(transitive)

• - Removed@antfu/utils@0.3.0(transitive)

• Updated@antfu/utils@^0.4.0

• Updatedkolorist@^1.5.1