Skip to content

faviconManager

管理网站图标(favicon)链接注入到 HTML 文件,支持多种图标配置方式和可选的图标文件复制。

导入

typescript
import { faviconManager } from '@meng-xi/vite-plugin'
// 或子模块导入
import { faviconManager } from '@meng-xi/vite-plugin/plugins/inject/favicon-manager'

快速开始

typescript
import { defineConfig } from 'vite'
import { faviconManager } from '@meng-xi/vite-plugin'

export default defineConfig({
  plugins: [faviconManager({ base: '/assets' })]
})

也可以直接传入字符串作为 base 路径:

typescript
export default defineConfig({
  plugins: [faviconManager('/assets')]
})

配置选项

选项类型默认值说明
basestring'/'图标基础路径
urlstring-图标完整 URL(覆盖 base + favicon.ico)
linkstring-自定义 link 标签 HTML(优先级最高)
iconsIcon[]-自定义图标数组
copyOptionsCopyOptions-图标文件复制配置

继承 BasePluginOptionsenabledverboseerrorStrategy

配置优先级

link > icons > url > base + favicon.ico

copyOptions

图标文件复制配置,仅当此对象存在时才开启文件复制功能。

选项类型默认值说明
sourceDirstring必填源文件目录
targetDirstring必填目标目录
overwritebooleantrue覆盖已存在文件
recursivebooleantrue递归复制

类型导出

Icon

单个网站图标的属性配置,对应 HTML <link> 标签。

属性类型必填说明
relstring图标关系类型,如 'icon'
hrefstring图标 URL
sizesstring图标尺寸,如 '32x32'
typestringMIME 类型,如 'image/png'

示例

自定义图标数组

typescript
faviconManager({
  icons: [
    { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
    { rel: 'icon', href: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
    { rel: 'icon', href: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' }
  ]
})

完整 URL

typescript
faviconManager({ url: 'https://example.com/favicon.ico' })
typescript
faviconManager({
  link: '<link rel="icon" href="/custom.ico" type="image/x-icon">'
})

带文件复制

typescript
faviconManager({
  base: '/assets',
  copyOptions: {
    sourceDir: 'src/assets/icons',
    targetDir: 'dist/assets/icons'
  }
})

注意事项

  • 图标链接通过 Vite 原生 transformIndexHtml 钩子注入到 <head>
  • 使用 link 选项时,通过字符串替换方式注入到 </head> 标签前
  • copyOptions 启用时默认使用增量复制,仅复制修改过的文件
  • 不完整的 copyOptions(缺少 sourceDirtargetDir)会抛出验证错误

Released under the MIT License.