Skip to content

系统图标

图标渲染原理

基于 iconify 的 svg 的 json 数据,通过 unplugin-icons 插件,将 svg 数据转换成 vue 组件

unplugin-icons

iconify

Journey with Icons Continues

图标教程

一、静态用法:直接写在 template 中

  • iconify

    • 安装 vscode 智能提示的插件: Iconify IntelliSense

    • 找图标:网址 https://icones.js.org/ 或者 vscode 安装 - Icônes

    • 确定图标名字:找到图标后复制名字 如:'mdi:emoticon' 或者 'mdi-emoticon',则对应的 vue 的 template 为

      html
      <div>
      	<icon-mdi-emoticon class="text-24px text-red" />
      	<icon-mdi:emoticon style="font-size:24px;color:#f00;" />
      </div>
      <div>
      	<icon-mdi-emoticon class="text-24px text-red" />
      	<icon-mdi:emoticon style="font-size:24px;color:#f00;" />
      </div>

      提示

      'icon-' 为预设的前缀, 在.env 里面设置变量 VITE_ICON_PREFFIX

    • 设置样式:同 html 标签一样直接应用 style 属性或者 class 属性; 通过设置 color 和 font-size 属性设置对应的颜色和大小

  • 本地 svg 图标

    • 在 src/assets/svg-icon 目录下选择一个 svg,取它的文件名,例如: 'custom-icon.svg'

    • 则对应的 vue 的 template 为

      html
      <icon-local-custom-icon class="text-24px text-red" />
      <icon-local-custom-icon class="text-24px text-red" />

      提示

      'icon-local' 为预设的前缀, 在.env 里面设置变量 VITE_ICON_LOCAL_PREFFIX

二、动态渲染: 根据图标名称渲染对应图标

  • iconify

    • 确定图标名字,如:'mdi-emoticon'

    • 动态渲染

      html
      <svg-icon icon="mdi-emoticon" />
      <svg-icon icon="mdi-emoticon" />
    • 多个图标动态渲染

      html
      <svg-icon
      	v-for="icon in icons"
      	:key="icon"
      	:icon="icon"
      	class="text-24px text-red"
      />
      <svg-icon
      	v-for="icon in icons"
      	:key="icon"
      	:icon="icon"
      	class="text-24px text-red"
      />
  • 本地 svg 图标

    • 确定 svg 文件名,例如: 'custom-icon.svg'

    • 动态渲染

      html
      <svg-icon local-icon="custom-icon" style="font-size:24px;color:#f00;" />
      <svg-icon local-icon="custom-icon" style="font-size:24px;color:#f00;" />

      提示

      svg-icon 为全局组件,已经注册过了,直接在 template 中应用,icon 属性为 iconify 图标名称, local-icon 为本地 svg 图标的文件名

三、通过 render 函数渲染: 适用于 NaiveUI 的图标渲染

  • 确定图标名字,如:iconify: 'mdi-emoticon', 或者本地 svg 图标 'custom-icon.svg'

  • 使用 useIconRender

    typescript
    import { useIconRender } from "@/composables";
    
    const { iconRender } = useIconRender();
    
    iconRender({ icon: "mdi-emoticon", fontSize: 24, color: "#f00" }); // iconify
    
    iconRender({ localIcon: "custom-icon" }); // 本地svg图标
    import { useIconRender } from "@/composables";
    
    const { iconRender } = useIconRender();
    
    iconRender({ icon: "mdi-emoticon", fontSize: 24, color: "#f00" }); // iconify
    
    iconRender({ localIcon: "custom-icon" }); // 本地svg图标

根据 MIT 许可证发布