代码块样式 Codes Style

普通标题段落

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个中文代码底层系统所提供的两套不同的接口。实际上Options API是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。 Icon fonts do not belong in modern web. They were 中文代码 a great solution when const abc = ref(false) was popular, web components did not exist and SVG support was buggy. Those bad times are over.

代码块

下面展示各种情况的代码块示例。

$npm install This component uses slots to create a tab panel of your code examples or preview. component to display a preview of some rendered code.

$npm sklfsf

const npm = {
  abc: 'install abc abc abc abc  abc  abc  abc  abc  abc  abc abc abcabc  abc  abc  abc  abc'
}

const data = reactive({
  name: ''
})
// 代码注释文字
export async function useSurround(gits: any, url: string) {
  const [prev, next]: any = await queryContent(`/docs/${gits}`)
    .where({ layout: { $ne: 'home' } })
    .only(['_path', 'title', 'name'])
    // .sort({ title: 1 })
    .findSurround(url)
  return { prev, next }
}

代码组

const data = reactive({
  name: ''
})
// 代码注释文字
async function fun() {
  data.value = res
}

Iconify Icon web component

Iconify Icon is a web component renders icons.

Usage

It is designed to be as easy to use as possible.

html

<iconify-icon icon="mdi:home"></iconify-icon>

Supported frameworks

Web component can be used in HTML without any UI framework. See usage examples below.

It also works great with all modern frameworks that support web components:

• Svelte and SvelteKit/Sapper.
• Vue 2 and Vue 3. Requires custom config when used in Nuxt (see below).
• Lit.
• Ember.
• React and Next, but with small differences, such as using class instead of className. Wrapper fixes iticonify-icon/react).

However, some UI frameworks require custom wrappers:

• Solid. See Iconify icon web component for Solid

Icon data on demand

Instead of embedding an entire icon, all you need to do is provide an icon name in icon attribute.

Web component will retrieve icon data from Iconify API

There are over 200k icons available from many open source icon sets.

Don't want to rely on third party API servers? You can host your own Iconify APIit with your own icons.

Shadow DOM

Icon is rendered in shadow DOM. What does that mean?

• HTML for icon is hidden, not part of main document.
• It simplifies hydration when web component is used in a UI framework with server side rendering. See below.
• Stylesheet used in document does not affect icons, preventing potential conflicts.

In some cases this can be a disadvantage, for example, if you do want to access icon content to perform CSS or JavaScript based animations. If you do not want a web component that uses shadow DOM, take a look at Iconify icon componentsicon-components/).

SSR hydration

One of issues web component solves is hydration, which is used by many modern UI frameworks.

Server side rendering is becoming more and more popular, hydration is complex and can easily be broken by a mismatched DOM.

What is hydration? It happens when bare document is generated on server, sent to browser, in browser UI framework makes it interactive by attaching event liseners to HTML generated on server instead of rendering new application. It is actually more complex than that, see various articles on SSR hydration.

There are several issues with hydrating icons:

• Icons might have unique IDs in elements, such as masks and clip paths. Using multiple icons on the same page requires using different IDs (or randomising them), which usually breaks hydration process.
• Dynamically loaded icon data cannot be rendered before hydration ends. This can be solved by rendering icon only after component has been mounted, but that might cause rendering delays and other issues.

Shadow DOM used by web component has big advantages over usual SVGs or framework specific components, but what about icon fonts?

Do not use icon fonts!!!

• Icon fonts are ugly. Browser renders icons using font rendering methods, which causes blurred icon edges and icons lose their sharpness.
• Icons rendered from icon fonts are often hard to align, resulting in misaligned icons.
• Browsers load huge fonts just to render few icons. This can be solved by using custom icon fonts, but doesn't solve other issues.
• No colored icons, only monotone. No SVG animations.

Icon fonts do not belong in modern web. They were a great solution when Internet Explorer was popular, web components did not exist and SVG support was buggy. Those bad times are over.