vite-plugin-virtual-resource

A vite plugin loader for virtual paths with resolvers.

Use import name from '~virtual/source' to include a non existant content that is loaded and transformed with a resolver.

V2 supports vite 4+. For previous vite version use [email protected]

Example

You need to include a svg icon from iconify icons framework. In your application you use your own component for output rendering (Icon-component) and you need only the raw svg-data. The raw-data comes from @iconify-json. The virtual-resource plugin resolves the svg-data (json). View exemples below.

It can resolve any resource, not only icons.

Install

npm install --save-dev @inveris/vite-plugin-virtual-resource

Usage

// vite.js
import { virtualResource } from '@inveris/vite-plugin-virtual-resource'

export default defineConfig({
  // ... vite config

  plugins: [
    virtualResource(),

    // ... other plugins
  ]
})

Without any options, virtual-resource uses a builtin resolver to include @iconify-json icon files and let you use it with import SomeIcon from '~/icon/PACKAGE/ICON_NAME'.

Example with default resolver (works with any framework: react, vue, svelte, ...)

import CloseIcon from '~icon/mdi/close-circle-outline'

<Icon src={CloseIcon} />

With virtual and custom resolver

// vite.js
import { virtualResource, resolver, virtuals } from '@inveris/vite-plugin-virtual-resource'

export default defineConfig({
  // ... vite config

  plugins: [
    virtualResource({
      virtuals: {
        // builtin
        '~icon/': virtuals.iconify,

        // builtin (long form)
        '~otherIconPackage/': {
          source: 'node_modules/@iconify-json/${1}/icons.json',
          match: /^.*?\/(.*?)\/(.*?)$/,
          resolver: resolver.iconify
        }

        // custom
        '~myicon/': {
          source: 'my-icon-dir/all-icons.json',
          match: /^.*?\/(.*?)$/,
          resolver: (source, matches, config) => {
            const name = matches[1]
            const allIcons = JSON.parse(fs.readFileSync(source, 'utf8'))
            return {
              code: 'export default \'' + allIcons[name] + '\''
            }
          }
        }
      }
    }),

    // ... other plugins
  ]
})

You can use your own resolver, view builtin-resolvers.ts for a complete example.

Example

import CloseIcon from '~icon/mdi/close-circle-outline'
import HelpIcon from '~otherIconPackage/mdi/help-circle-outline'
import MyIcon from '~myicon/loading'

<Icon src={CloseIcon} />
<Icon src={HelpIcon} />
<Icon src={MyIcon} />

FAQ

Why not use vite to include resources?

That's a part of the job of vite. But in some cases you need to load and resolve complex data, that is not direct possible in vite without a plugin.

Why not use unplugin-icons?

unplugin-icons is a great plugin to include (only?) icons as a component. But for each icon it generates a component. So each component increases the code size unnecessary. If you use your own Icon-component for output rendering, you need only the raw svg-data.