feat(preset-icons): handle the finnal usedProps

I'll add a hook to add handling of props to the final output. Since `iconify` merges the final properties into `usedProps`, it may not be the properties that the user ultimately wants.
close unocss#3744

packages/preset-icons/src/core.ts

@@ -29,6 +29,7 @@ export function createPresetIcons(lookupIconLoader: (options: IconsOptions) => P
       collectionsNodeResolvePath,
       layer = 'icons',
       unit,
+      propsProcessor,
     } = options
 
     const flags = getEnvFlags()
@@ -95,6 +96,8 @@ export function createPresetIcons(lookupIconLoader: (options: IconsOptions) => P
             return
           }
 
+          propsProcessor?.(usedProps, collection, name, svg, _mode)
+
           const url = `url("data:image/svg+xml;utf8,${encodeSvgForCss(svg)}")`
 
           if (_mode === 'auto')

packages/preset-icons/src/types.ts

@@ -9,6 +9,7 @@ export interface IconsOptions {
    * @default 1
    */
   scale?: number
+
   /**
    * Mode of generated CSS icons.
    *
@@ -20,39 +21,46 @@ export interface IconsOptions {
    * @see https://antfu.me/posts/icons-in-pure-css
    */
   mode?: 'mask' | 'background-img' | 'auto'
+
   /**
    * Class prefix for matching icon rules.
    *
    * @default `i-`
    */
   prefix?: string | string[]
+
   /**
    * Extra CSS properties applied to the generated CSS
    *
    * @default {}
    */
   extraProperties?: Record<string, string>
+
   /**
    * Emit warning when missing icons are matched
    *
    * @default false
    */
   warn?: boolean
+
   /**
    * In Node.js environment, the preset will search for the installed iconify dataset automatically.
    * When using in the browser, this options is provided to provide dataset with custom loading mechanism.
    */
   collections?: Record<string, (() => Awaitable<IconifyJSON>) | undefined | CustomIconLoader | InlineCollection>
+
   /**
    * Rule layer
    *
    * @default 'icons'
    */
   layer?: string
+
   /**
    * Custom icon customizations.
    */
   customizations?: Omit<IconCustomizations, 'additionalProps' | 'trimCustomSvg'>
+
   /**
    * Auto install icon sources package when the usages is detected
    *
@@ -61,18 +69,21 @@ export interface IconsOptions {
    * @default false
    */
   autoInstall?: boolean
+
   /**
    * Path to resolve the iconify collections in Node.js environment.
    *
    * @default process.cwd()
    */
   collectionsNodeResolvePath?: string
+
   /**
    * Custom icon unit.
    *
    * @default `em`
    */
   unit?: string
+
   /**
    * Load icons from CDN. Should starts with `https://` and ends with `/`
    *
@@ -81,8 +92,14 @@ export interface IconsOptions {
    * - https://cdn.skypack.dev/
    */
   cdn?: string
+
   /**
    * Custom fetch function to provide the icon data.
    */
   customFetch?: (url: string) => Promise<any>
+
+  /**
+   * Custom the finnal additional props.
+   */
+  propsProcessor?: (props: Record<string, string>, collection?: string, icon?: string, svg?: string, mode?: string) => void
 }