@nuxt/icon - npm Package Compare versions

Comparing version 1.4.5 to 1.4.6

dist/module.d.ts

@@ -127,3 +127,3 @@ import * as _nuxt_schema from '@nuxt/schema';
 type IconifyIconCustomizeCallback = (content: string, name?: string, prefix?: string, provider?: string) => string;
-interface ModuleOptions extends Partial<NuxtIconRuntimeOptions> {
+interface ModuleOptions extends Partial<Omit<NuxtIconRuntimeOptions, 'customize'>> {
     /**
@@ -130,0 +130,0 @@ * Name of the component to be registered

dist/module.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.4.5",
+  "version": "1.4.6",
   "builder": {
@@ -10,0 +10,0 @@ "@nuxt/module-builder": "0.8.1",

dist/runtime/components/index.js

@@ -30,18 +30,18 @@ import { computed, defineComponent, h } from "vue";
     const nuxtApp = useNuxtApp();
-    const options = useAppConfig().icon;
+    const runtimeOptions = useAppConfig().icon;
     const name = useResolvedName(() => props.name);
     const component = computed(
-      () => nuxtApp.vueApp?.component(name.value) || ((props.mode || options.mode) === "svg" ? NuxtIconSvg : NuxtIconCss)
+      () => nuxtApp.vueApp?.component(name.value) || ((props.mode || runtimeOptions.mode) === "svg" ? NuxtIconSvg : NuxtIconCss)
     );
     const style = computed(() => {
-      const size = props.size || options.size;
+      const size = props.size || runtimeOptions.size;
       return size ? { fontSize: Number.isNaN(+size) ? size : size + "px" } : null;
     });
-    const customize = props.customize || options.customize;
+    const customize = props.customize || runtimeOptions.customize;
     return () => h(
       component.value,
       {
-        ...options.attrs,
+        ...runtimeOptions.attrs,
         name: name.value,
-        class: options.class,
+        class: runtimeOptions.class,
         style: style.value,
@@ -48,0 +48,0 @@ customize

package.json

 {
   "name": "@nuxt/icon",
   "packageManager": "pnpm@9.6.0",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "license": "MIT",
@@ -36,3 +36,4 @@ "type": "module",
     "prepublishOnly": "pnpm lint",
-    "release": "release-it"
+    "release": "release-it",
+    "test": "pnpm -C playground test"
   },
@@ -50,3 +51,4 @@ "dependencies": {
     "mlly": "^1.7.1",
-    "pathe": "^1.1.2"
+    "pathe": "^1.1.2",
+    "std-env": "^3.7.0"
   },
@@ -69,2 +71,3 @@ "devDependencies": {
     "nuxt": "^3.12.4",
+    "prettier": "^3.3.3",
     "release-it": "^17.6.0",
@@ -71,0 +74,0 @@ "typescript": "^5.5.4",

README.md

@@ -223,2 +223,52 @@ ![nuxt-icon](https://github.com/nuxt-modules/icon/assets/904724/ae673805-06ad-4c05-820e-a8445c7224ce)
 
+**Customizing Icons with the customize Option**
+
+The customize option allows you to modify various aspects of the SVG icons used in your project. With this option, you can:
+
+- Change Stroke Width
+- Change Colors
+- Change Animation Duration
+- Change Opacity
+- Add Extra Shapes
+
+You have full control over SVG content with these customization options.
+
+In a Component
+You can define a customize function within a component to apply various modifications to your icons.
+
+```vue
+<script setup lang="ts">
+// Define the customize function to modify SVG content
+const customize = (content: string, name: string, prefix: string, provider: string) => {
+  if (prefix !== 'tabler') return content // Ignore Prefix
+
+  return content
+    .replace(/stroke-width="[^"]*"/g, `stroke-width="2"`) // Change stroke width to 2
+    .replace(/stroke="[^"]*"/g, `stroke="#FF5733"`) // Change stroke color to red
+    .replace(/fill="[^"]*"/g, `fill="#FF5733"`) // Change fill color to red
+    .replace(/animation-duration="[^"]*"/g, `animation-duration="1s"`) // Change animation duration to 1s (for animated icons)
+    .replace(/opacity="[^"]*"/g, `opacity="0.8"`);// Change opacity to 0.8
+}
+</script>
+
+<template>
+  <Icon name="tabler:star" :customize="customize" />
+</template>
+```
+
+In the App Configuration File:
+
+Alternatively, you can apply these customizations globally in the `app.config.ts` file.
+```ts
+// app.config.ts
+export default defineAppConfig({
+  icon: {
+    customize: (content: string, name: string, prefix: string, provider: string) => {
+      // ...
+    },
+  }
+})
+```
+With this configuration, all icons throughout your application will have these customizations applied consistently.
+
 ### Server Bundle
@@ -225,0 +275,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

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

69496

increased by4.47%

Lines of code

1475

increased by2.79%

Number of lines in readme file

440

increased by12.82%

Worsened metrics

Dependency count

12

increased by9.09%

Dev dependency count

21

increased by5%

Dependency changes

• + Addedstd-env@^3.7.0