feat: extraProperties option (#24)

src/core.test.ts

@@ -8,13 +8,19 @@ test("generateComponent", () => {
       { icons: collections["mdi"], name: "home" },
       {
         scale: 1.5,
+        extraProperties: {
+          "-webkit-mask-size": "contain",
+          "-webkit-mask-position": "center",
+        },
       },
     ),
   ).toMatchInlineSnapshot(`
     {
       "--svg": "url(\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5Z'/%3E%3C/svg%3E\\")",
       "-webkit-mask": "no-repeat center / 100%",
       "-webkit-mask-image": "var(--svg)",
+      "-webkit-mask-position": "center",
+      "-webkit-mask-size": "contain",
       "background-color": "currentColor",
       "display": "inline-block",
       "height": "1.5em",

src/core.ts

@@ -5,6 +5,7 @@ import { IconifyIcon, IconifyJSON } from "@iconify/types"
 import { getIconCSS, getIconData } from "@iconify/utils"
 import { createRequire } from "module"
 import { CollectionNames } from "../types"
+import { GenerateOptions } from "./types"
 
 declare const TSUP_FORMAT: "esm" | "cjs"
 const req =
@@ -60,10 +61,6 @@ export const getIconCollections = (
   return collections
 }
 
-export type GenerateOptions = {
-  scale: number
-}
-
 export const generateIconComponent = (
   data: IconifyIcon,
   options: GenerateOptions,
@@ -78,6 +75,9 @@ export const generateIconComponent = (
     }
     return ""
   })
+  if (options.extraProperties) {
+    Object.assign(rules, options.extraProperties)
+  }
   return rules
 }
 

src/types.ts

@@ -1,14 +1,23 @@
-export interface IconsOptions {
+export type GenerateOptions = {
   /**
    * Scale relative to the current font size (1em).
    *
    * @default 1
    */
   scale?: number
+  /**
+   * Extra CSS properties applied to the generated CSS.
+   *
+   * @default `{}`
+   */
+  extraProperties?: Record<string, string>
+}
+
+export type IconsOptions = {
   /**
    * Class prefix for matching icon rules.
    *
    * @default `i`
    */
   prefix?: string
-}
+} & GenerateOptions