最佳实践：UnoCSS & Iconify 图标解决方案

2024-01-12· 20min

#最佳方案

#优势

支持尺寸、颜色等动态修改
大量图标支持：icon-sets.iconify.design
按需/灵活使用

#配置

package.json

$ npm install @unocss/nuxt @unocss/reset
$ npm install @iconify/json -D

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@unocss/nuxt"],
});

uno.config.ts

import { presetIcons, defineConfig } from "@unocss";

export default defineConfig({
  presets: [
    presetIcons({
      /* 选项 */
    }),
    // ...其他预设
  ],
});

#使用

xxx.vue

<template>
  <div class="i-hugeicons:moon-landing size-24px mr-10px font-600" />
</template>

#参考文献

#其它方案

#1. svg 方案

声明
base-svg.vue
，并在 layout 引入

<template>
  <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;">
    <symbol id="icon-correct" class="icon" viewBox="0 0 1024 1024">
      <path d="M421.858 683.366l401.796-448.518c18.66-20.828 50.668-22.586 71.498-3.928 20.828 18.66 22.586 50.67 3.928 71.498L463.638 788.494c-18.606 20.768-50.5 22.586-71.344 4.066L129.004 558.636c-20.906-18.572-22.796-50.576-4.222-71.48 18.574-20.906 50.576-22.796 71.48-4.222L421.86 683.366z" fill="#444444" p-id="5152"></path>
    </symbol>
</template>

xxx.vue
使用

<template>
  <svg aria-hidden="true">
    <use xlink:href="#icon-correct" />
  </svg>
</template>

#2. css 方案

ref: zhangxinxu · css

<style>
  .icon-arrow-up::before {
    height: 0.65em;
    width: 0.65em;
    border-style: solid;
    border-width: 2px 0 0 2px;
    -ms-transform: translate(-50%, -25%) rotate(45deg);
    transform: translate(-50%, -25%) rotate(45deg);
  }
</style>

<css-icon class="icon-arrow-up"></css-icon>

#3. 普通 img

图标来源：iconfont

<img src="/public/images/xxxx.png" />

On this page