@varlet/unplugin-icon-builder
v0.5.1
Published
`@varlet/unplugin-icon-builder` is the [unplugin](https://github.com/unjs/unplugin) wrapper of `@varlet/icon-builder`
Downloads
708
Readme
Intro
@varlet/unplugin-icon-builder
is the unplugin wrapper of @varlet/icon-builder
Installation
npm
npm i @varlet/unplugin-icon-builder -D
yarn
yarn add @varlet/unplugin-icon-builder -D
pnpm
pnpm add @varlet/unplugin-icon-builder -D
Usage
Example
The project file directory is as follows.
|-- project
|-- src
|-- main.ts
|-- svg-icons
|-- account-circle.svg
// main.ts
import 'virtual-icons'
<i class="i i-account-circle"></i>
Vite Configuration
// vite.config.ts
import { defineConfig } from 'vite'
import icon from '@varlet/unplugin-icon-builder/vite'
export default defineConfig({
plugins: [
icon({
// See the type definition below for configuration
}),
],
})
Webpack Configuration
// vite.config.ts
const Icon = require('@varlet/unplugin-icon-builder/webpack')
module.exports = {
plugins: [
Icon.default({
// See the type definition below for configuration
})
],
}
Vue Cli Configuration
// vite.config.ts
const { defineConfig } = require('@vue/cli-service')
const Icon = require('@varlet/unplugin-icon-builder/webpack')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
Icon.default({
// See the type definition below for configuration
})
],
},
})
Options Type Declaration
export interface Options {
/**
* @default `i-icons`
* font name.
*/
name?: string
/**
* @default `i`
* font name prefix.
*/
namespace?: string
/**
* @default `svg-icons`
* svg directory.
*/
dir?: string
/**
* svg library, it can be understood as dir in node_modules, 'lib' priority is greater than dir.
*/
lib?: string
/**
* @default `virtual-icons`
* virtual module id.
*/
moduleId?: string
/**
* @default `virtual.icons.css`
* font css file name generated based on svg. it can also be a path, which must end with .css.
*/
generatedFilename?: string
/**
* @default `true`
* whether the font is inlined in the bundle via base64.
*/
base64?: boolean
/**
* icon font family class name, defaults same as `options.namespace`.
*/
fontFamilyClassName?: string
/**
* @default `false`
* on demand options.
*/
onDemand: boolean | {
/**
* @default `['./src/**/*.{vue,jsx,tsx,js,ts}']`
* files to watch for changes, node_modules will always be ignored.
*/
include?: string[]
/**
* @default `['./src/**/*.{vue,jsx,tsx,js,ts}']`
* files to exclude from watching.
*/
exclude?: string[]
}
}