useFavicon

类别

Browser

导出体积

441 B

上次更改

7 months ago

响应式的网站图标

示例

源码 playground (beta)

更改 favicon

用法

import { useFavicon
 } from '@vueuse/core'

const icon
 = useFavicon
()

icon
.value
 = 'dark.png' // 更改当前图标

传递源 ref

你可以将一个 ref 传递给它，源 ref 的更改将自动反映到你的网站图标上。

import { useFavicon
, usePreferredDark
 } from '@vueuse/core'
import { computed
 } from 'vue'

const isDark
 = usePreferredDark
()
const favicon
 = computed
(() => isDark
.value
 ? 'dark.png' : 'light.png')

useFavicon
(favicon
)

当传递了一个源 ref 时，返回的 ref 将与源 ref 相同

const source
 = shallowRef
('icon.png')
const icon
 = useFavicon
(source
)

console
.log
(icon
 === source
) // true

类型声明

export interface UseFaviconOptions extends ConfigurableDocument {
  baseUrl
?: string
  rel
?: string
}
/**
 * 响应式 favicon.
 *
 * @see https://vueuse.org/useFavicon
 * @param newIcon
 * @param options
 */
export declare function useFavicon
(
  newIcon
: ReadonlyRefOrGetter
<string | null | undefined>,
  options
?: UseFaviconOptions,
): ComputedRef
<string | null | undefined>
export declare function useFavicon
(
  newIcon
?: MaybeRef
<string | null | undefined>,
  options
?: UseFaviconOptions,
): Ref
<string | null | undefined>
export type UseFaviconReturn
 = ReturnType
<typeof useFavicon
>