Use diagram

vue file

Local icon in the template (effective offline)

This project usesunplugin-iconsAutomatically introduce@iconify-json/icon-park-outlineIllustration, recommended to goiconesFind the illustration you need

For example, you found a diagramhome, Must use<{collection}-{icon} />format to introduce it, otherwise it is invalid.

// usage
<icon-park-outline-home />

<IconParkOutlineHome />

// modify style
<icon-park-outline-home style="font-size: 2em; color: red" />

// modify style by Unocss
<icon-park-outline-home class="text-red text-2em" />

TIP

Recommended useIconify IntelliSensePlugins improve development experience

Internet diagram in the template (offline is invalid)

The project also provides the function of automatically loading network diagrams, which can be usediconesAll illustrations inicon-park-outlineSeries, this function is based on@iconify/vueandn-iconAchieved. This method illustration will not be automatically packaged into the project. Offline invalid

For example, you found a diagramicon-park-outline:user

// usage
<nova-icon icon="icon-park-outline:user" />

// modify style
<nova-icon icon="icon-park-outline:user" :color="red" :size="22" />

Props type declaration

interface iconPorps {
  /* 圖示名稱 */
  icon?: string
  /* 圖示顏色 */
  color?: string
  /* 圖示大小 */
  size?: number
  /* 圖示深度 */
  depth?: 1 | 2 | 3 | 4 | 5
}

ts file

Local icon in ts (effective offline)

Some scenarios may not be able to use components directly to use the illustration, such as in the ts file or vue file.scriptAdd some graphic renderings with Naive components, and you need to use the graphic through manual introduction.

import IconRedo from '~icons/icon-park-outline/redo'

const options = [
  {
    label: '刷新',
    key: 'reload',
    icon: () => h(IconRedo),
  }
]

TS network circuit diagram (offline invalid)

The same as the above scene, but the illustration is loaded through the network

import { renderIcon } from '@/utils'

const options = [
  {
    label: '刷新',
    key: 'reload',
    icon: renderIcon('icon-park-outline:redo'),
  }
]

TIP

renderIconReturn oneh函數Packed@iconify/vue, not to return directlyVNodeNode, as needed, its usage may berenderIcon('{collection}:{icon}')orrenderIcon('{collection}:{icon}')()The latter method is to return directlyVNodenode.

svg diagram

This project usesunplugin-iconsTo automatically introduce svg illustration, first you need tosrc/assets/svg-iconsAdd svg diagram

For example, you added alogo.svg, In this way, the name you introduced in the project must conform to the formatsvg-icons-{name}

// usage
<svg-icons-logo />

// modify style by Unocss
<svg-icons-logo class="text-2em" />

TIP

For visual aesthetics, the svg image is preset to 1.2em size, which you can modify bybuild\plugins.tsTo change this default behavior

// auto import iconify's icons
Icons({
  defaultStyle: 'display:inline-block',
  compiler: 'vue3',
  customCollections: {
    'svg-icons': FileSystemIconLoader(
      'src/assets/svg-icons',
      svg => svg.replace(/^<svg /, '<svg fill="currentColor" width="1.2em" height="1.2em"')
    ),
  },
})

Dynamically introduce local svg diagrams

Sometimes it may be necessary to dynamically introduce svg illustrations, which need to be used at this time.renderIconThe function, the name of the incoming diagram must belocal:The logo starts with

import { renderIcon } from '@/utils'

// 自動引入 `/src/assets/svg-icons/logo.svg`
renderIcon('local:logo', { size: 20 })

Use in templatesnova-iconComponents to introduce

// usage
<nova-icon icon="local:cool" />

// modify style
<nova-icon icon="local:cool" :color="red" :size="22" />