https://github.com/hairyf/iconify-svgo-loader

https://github.com/hairyf/iconify-svgo-loader

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/hairyf/iconify-svgo-loader
• Owner: hairyf
• Created: 2023-04-13T03:45:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-28T02:59:23.000Z (10 months ago)
• Last Synced: 2024-10-03T08:21:03.760Z (3 months ago)
• Language: TypeScript
• Size: 85 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## iconify-svgo-loader

Ionify loader optimized using [SVGO](https://github.com/svg/svgo), Works perfectly with [@unocss/preset-icons](https://unocss.dev/presets/icons) or [unplugin-icons](https://github.com/antfu/unplugin-icons).

Normal use: default loading of presets and monochrome icon processing, prefixIds

```ts

import FileSystemSvgoLoader from 'iconify-svgo-loader'

const loader1 = FileSystemSvgoLoader('./src/assets/fonts', {/* options */})

```

Custom Callback mode to obtain name and svg content

```ts

import FileSystemSvgoLoader from 'iconify-svgo-loader'

const loader2 = FileSystemSvgoLoader('./src/assets/fonts', (name, svgContent) => {

  return {

    /* options */

  }

})

```

Complete example：handling monochrome icons, and adding prefixIds

```ts

import FileSystemSvgoLoader, { prefixIds, presetDefault, sortAttrs, convertColors } from 'iconify-svgo-loader'

const loader3 = FileSystemSvgoLoader('./src/assets/fonts', (name, svgContent) => {

  // is single color

  const single = patch('fill', svgContent) + patch('stop-color', svgContent) === 1

  const plugins = [

    // set of built-in plugins enabled by default

    presetDefault(),

    // enable built-in plugins by name

    prefixIds({ prefix: name }),

    // or by expanded notation which allows to configure plugin

    sortAttrs({ xmlnsOrder: 'alphabetical' }),

  ]

  if (single)

    plugins.push(convertColors({ currentColor: true }))

  return {

    multipass: true,

    plugins: plugins

  }

})

function patch(re: string, s: string) {

  return s.split(re).length - 1

}

```