useFavicon

分类

浏览器

导出大小

441 B

上次更改

8 个月前

响应式网站图标 (favicon)

演示

源代码演练场 (beta)

将网站图标更改为

用法

import { useFavicon
 } from '@vueuse/core'

const icon
 = useFavicon
()

icon
.value
 = 'dark.png' // change current icon

传入源 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
}
/**
 * Reactive favicon.
 *
 * @see https://vueuse.org.cn/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
>