nvue中使用自定义icon;

[cps8]

使用方式(这里是以本地icon为例)：

1. 在图标库(如阿里矢量图库)定义好自己的项目, 在项目设置中设置好'FontClass/Symbol 前缀'和'Font Family', 比如‘FontClass/Symbol 前缀’='my-ico-', 'Font Family'='ciconfont', 字体格式勾选ttf
2. 代码中使用:
   2.1. 导入字体文件, 定义UnicodeMap文件并导入, 注意: UnicodeMap的key为第1步中的FontClass/Symbol 前缀 + 图标文件的Font Class / Symbol, value是图标文件的Unicode值且以'\u'开头, 比如'my-ico-bulb-outline'='\ue6b5'

  import usFontUrl from '@/assets/my-icon-ciconfont/iconfont.ttf';
  import usIcons from '@/assets/my-icon-ciconfont/iconUnicodeMap';

2.2. 在data中定义返回字段

export default {
      data() {
        return {
          customFontUrl: usFontUrl,
          customIcons: usIcons
        }
      }
    }

2.3. 在icon组件中使用, customPrefix为第1步中设置的FontClass/Symbol 前缀不含最后的短横线, customFontFamily为第1步中设置的Font Family, name是2.1定义的UnicodeMap中的key不包含FontClass/Symbol 前缀部分

    <up-icon name="bulb-outline" size="36" customPrefix="my-icon" customFontFamily="ciconfont" :customFontUrl="customFontUrl" :customIcons="customIcons"></up-icon>

2.4. 定义一个class, 使用自定义icon, class名为customPrefix的值, 为了方便全局使用，可在App.vue中定义

    .my-icon {
      font-family: my-icon-ciconfont;
      text-decoration: none;
      text-align: center;
    }

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
uview-plus	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 19, 2024 9:30am

[cps8]

说明 我的项目仅在Android APP中有测试过

[ijry]

代码被格式化看不出来变动哪里了

[cps8]

1. 在beforCreate中动态添加字体文件

beforeCreate() {
    // #ifdef APP-NVUE
    if (this.customFontFamily) {
        domModule.addRule('fontFace', {
            'fontFamily': `${this.customPrefix}-${this.customFontFamily}`,
            'src': `url('${this.customFontUrl}')`
        })
    }
    // #endif
},

2. 在icon方法，修改自定义图标返回值

// 通过图标名，查找对应的图标
icon() {
    // 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
    if (this.customPrefix !== "uicon") {
        return this.customIcons[this.customPrefix+'-'+this.name] || this.name;
    }
    // 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
    return icons['uicon-' + this.name] || this.name
}