内网环境: vue3中使用 iconify 的在线图标

悟空和大王
4 阅读2分钟

为什么要使用在线图标?

减少项目本身的体积

如何找到你需要的图标

Iconify - home of open source icons

image.png

image.png

使用图标: material-symbols:10k

图标名格式: 图标集:图标名

<iconify-icon icon="material-symbols:10k" style="font-size: 48px; color: red;"> </iconify-icon>

vue3 默认通过 iconify 官方api服务使用在线图标

pnpm add @iconify/vue

import { Icon } from '@iconify/vue';
import type { App } from 'vue';

export function setupIconify(app: App) {
  app.component('IconifyVue', Icon)
  app.component('iconify-vue', Icon)
}

<div>
  <!-- 基础用法 -->
  <iconify-icon icon="mdi:home"></iconify-icon>

  <!-- 修改颜色和大小 (通过 CSS 样式) -->
  <iconify-icon icon="mdi:account-circle" style="font-size: 48px; color: red;"> </iconify-icon>

  <!-- 垂直对齐 (inline 模式) -->
  <p>这是文字 <iconify-icon icon="mdi:arrow-right" inline></iconify-icon> 更多文字</p>
</div>

内网通过docker搭建 iconify api 服务

docker-compose.yml

networks:
  local-docker-network:
    external: true # 声明网络为外部已存在

services:
  server:
    image: iconify/api:latest
    container_name: iconify-api
    restart: always
    networks:
      - local-docker-network
    volumes:
      # 关键配置：将宿主机的 ./custom-icons 目录挂载到容器的 /data/iconify-api/icons 目录
      # :ro 表示只读，防止容器内误修改
      - ./custom-icons:/data/iconify-api/icons:ro
      - ./iconify-cache:/data/iconify-api/cache
    ports:
      # 将服务的3000端口, 映射到本地的4100端口, 外部通过 4100 端口访问这个docker服务
      - "4100:3000"
  • 以前台方式启动服务: docker compose up
  • 以后台方式启动服务: docker compose start

验证服务是否正常启动, 浏览器直接访问: http://localhost:4100/mdi.json?icons=home, 应该会返回类似下面的json内容

{"prefix":"mdi","lastModified":1737398331,"aliases":{},"width":24,"height":24,"icons":{"home":{"body":"<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z"/>"}}}

通过@iconify/vue 的 addAPIProvider 配置私服 api 地址

import { Icon, addAPIProvider } from '@iconify/vue';
import type { App } from 'vue';

// 1. 设置自定义 API 地址 (指向你的内网 Docker 服务)
// 这里将默认的空前缀（所有图标集）指向你的内网 IP

const iconifyApiUrl = import.meta.env.VITE_ICONIFY_API_URL

// 使用 addAPIProvider 设置默认 provider
if (iconifyApiUrl) {
  // 这里 '' 表示访问任意 iconify 图标, 都走 http://10.175.136.71:4100 这个地址
  // 此时 <iconify-icon icon="mdi:home"></iconify-icon> 会去请求: http://10.175.136.71:4100/mdi.json?icons=account-circle%2Carrow-right%2Chome
  addAPIProvider('', {
    // 这里最后不要有 / 
    resources: ['http://10.175.136.71:4100']
  });
  console.log('[Iconify] Added API provider for default:', iconifyApiUrl);
  
  // 也可以配置为 'local'. 此时表示仅 @local:xxx 的图标,才走 http://10.175.136.71:4100 , 其他图标请求,依旧走官方api服务
  // 此时 <iconify-icon icon="@local:mdi:home"></iconify-icon> 才会去请求: http://10.175.136.71:4100/mdi.json?icons=account-circle%2Carrow-right%2Chome
  // addAPIProvider('local', {
  //   resources: ['http://10.175.136.71:4100']
  // });
}

export function setupIconify(app: App) {
  app.component('IconifyVue', Icon)
  app.component('iconify-vue', Icon)
}

通过 iconify api 服务加载自定义图标

创建 my-custom-icons.json 文件, 并放入custom-icons目录, 然后就能通过如下方式使用了

<iconify-icon icon="my-custom:logo"></iconify-icon>
<iconify-icon icon="my-custom:user-settings"></iconify-icon>

my-custom-icons.json 文件内容

{ 
    "prefix": "my-custom", 
    "icons": { 
        "logo": { 
            "body": "<path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' stroke='currentColor' stroke-width='2' fill='none'/>" 
         }, 
         "user-settings": { 
             "body": "<circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 8.91 4 1.65 1.65 0 0 0 10.4 2h1.2c.7 0 1.36.42 1.59 1.09l.06.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82 1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z' fill='currentColor'/>" 
         } 
    }, 
    "width": 24, 
    "height": 24 
}

使用工具生成 my-custom-icons.json 文件

npx @iconify/tools convert ./path/to/your/svg-folder --output ./my-custom-icons.json
avatar
文章
阅读
粉丝