使用SVG前言构建您自己的图标库
嗨，我是杰伊。在项目开发过程中，很多时候设计师会给你一个SVG图标，让你在项目中作为字体图标使用。也许您现有项目中的某个人已经构建了这个系统。你可以直接把这个文件放到某个文件夹下，然后运行一个命令就可以使用，非常方便。例如，呈现一个图标。那么如果你现在一无所有，让你自己搭建这样一个系统，你会怎么做？一起往下看吧。以下图标素材都是我在网上找的。它们在这里仅用于学习目的。入侵与删除~实操首先使用vite搭建一个项目：npminit生成一个package.json文件，内容如下：{"name":"font","version":"1.0.0","description":"fontproject","main":"index.js","scripts":{"dev":"vite"},"author":"jayliang","license":"ISC",}npmivite-D安装vite，在vite根目录下新建index.html和index.js，在index.html中导入index.js，如下：首先，我们在根目录下创建一个assets文件夹，用来存放SVG文件。然后看下面的代码：//index.jsconstapp=document.querySelector('#app')app.innerHTML=render()functionrender(){return`HelloSVG
${renderIcon('search',{color:'red',fontSize:30})}
`}functionrenderIcon(name,options={color:'black',fontSize:16}){return''}在主要的渲染逻辑中，我们真正需要实现的是renderIcon方法。看上面的姿势，好像renderIcon是要直接返回SVG对应的HTML片段。我们现在手里只有一批SVG文件，怎么能让他返回代码片段呢？虽然在浏览器环境下开发可以动态导入文件，但是读取文件的原文还是有一定的难度。毕竟没有fs.readFile这样的API。这里我们可以写一个简单的预处理脚本，先读出SVG文件的内容，在根目录下创建一个icons文件夹，用来存放脚本处理的结果。这个预处理脚本要处理的事情如下：读取SVG文件的所有内容，转成字符串导出，提取宽高的字符串，填入SVG文件，然后传入as参数。生成一个入口文件以公开所有SVG文件。icons文件夹大概是这样的：index.js//入口文件script.js//生成文件脚本home.js//home.svg生成的文件search.js//search.svg生成的文件脚本实现下面的Take看一下script.js脚本的实现.resolve(__dirname,'../assets')//存放SVG文件的目录constassets=fs.readdirSync(assetsDirPath)constcurrentPath=path.resolve(__dirname,'./')//当前目录，即图标目录资产。forEach(asset=>{constassetPath=`${assetsDirPath}/${asset}`letres=fs.readFileSync(assetPath,{encoding:'utf8'})constreg=/
[\s\S]*<\/svg>///过滤掉SVG标签letsvg=reg.exec(res)[0]constdom=newJSDOM(`${svg} `)//方便操作节点对象constdocument=dom.window.document;constcontainer=document.querySelector('#container');constsvgDom=container.querySelector('svg')svgDom.setAttribute('width','${fontSize}')//宽度和黑度正确的属性处理svgDom.setAttribute('height','${fontSize}')constpaths=svgDom.querySelectorAll('path')for(leti=0;i
