携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

字体图标库

阿里巴巴矢量库

每次更新图标后，需要下载到本地，提交到项目

项目静态目录

尽量放到项目静态目录，防止打包进行编译

图标查看

打开demo_index.html后，查看symbol下的图标

后期项目中，用到那些图标，可在demo_index.html查找名称

公共组件-代码实践


const props = defineProps({
  iconClass: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: ''
  },
})

// 图标在 iconfont 中的名字
const iconName = computed(() => {
  return `#${props.iconClass}`
})
// 给图标添加上类名
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`
  }
  return 'svg-icon'
})

项目应用

<span class="tool-dl"
   <svg-icon icon-class="icon-shezhi" />
</span>

.tool-dl{
  color: #EB5A50;
}

上述为项目的基本使用方式，但是引入后，会发现颜色color没办法修改，怎么办呢？

更详情操作使用，可参考 Vue3 中引入 SVG 图标

对于正常的使用习惯，引入后，一般都是通过class样式进行修改，但是矢量库导出后，每个svg的fill都是有填充颜色，所以引入后是无法覆盖生效。这个时候，就需要对图标库的fill进行处理。

脚本处理

流程：

项目中，图标库提交前，执行命令，批量删除fill

icon-fix.js

/*
 * @description: 字体图标库处理脚本
 * @Author: xxx
 */
const fs = require("fs");
const path = require("path");

function readFile(path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, "utf8", function (err, data) {
      err ? reject(err) : resolve(data);
    });
  });
}

function writeFile(path, data) {
  return new Promise((resolve, reject) => {
    fs.writeFile(path, data, "utf-8", function (err) {
      err ? reject(err) : resolve();
    });
  });
}

async function run() {
  try {
    const url = path.resolve("./public/resource/fonts/iconfont.js");
    const str = await readFile(url);
    const newStr = str.replace(/fill="\S+"/g, "");
    await writeFile(url, newStr);
  } catch (e) {
    console.error(e);
  }
}

run();

解读：

await readFile(url) 读取文件

str.replace(/fill="\S+"/g, "") 对文件内容的fill进行替换，替换为空

package.json

    "scripts": {
        "iconfix": "node scripts/icon-fix.js",
    }

执行 npm run iconfix，然后就可以提交使用了，是不是很爽呢。。。。

如何解决字体图标库svg fill颜色填充问题？