同时，在flex布局流行的今天，之间的对齐方式图标和文字，没有问题了。SVG还有一个iconfont做不到的特性：多色图标。这对于一些显示特殊图标的场景来说已经足够了。平滑过渡指南Vite+Vue3首先，在src目录下创建一个icons目录，用来放置采集到的单个SVG文件。接下来安装vite-plugin-svg-icons的依赖：$pnpmaddvite-plugin-svg-icons-D更改Vite的配置：//vite.config.jsimport{defineConfig}from'vite'import{resolve}从'path'导入{createSvgIconsPlugin}从'vite-plugin-svg-icons'导出默认defineConfig({...,plugins:[...,createSvgIconsPlugin({iconDirs:[resolve(process.cwd(),'src/icons')],symbolId:'i-[name]',customDomId:'__svg__icons__dom__',})]})在main.js中注入生成svg符号的方法：//src/main.jsimport'virtual:svg-icons-register'完成以上步骤后，body中会多出一个svg元素，就是icons目录下单个文件对应的symbols。然后，我们可以创建SvgIcon组件：<脚本设置>defineProps({icon:{type:String,required:true},color:{type:String,default:'#fff'},size:{type:Number,default:32}})可以在main.js中全局注册：//src/main.jsimport{createApp}form'vue'importAppfrom'@/App.vue'importSvgIconfrom'@components/SvgIcon.vue'constapp=createApp(App)app.component('SvgIcon',SvgIcon)组件usage:如果后面需要扩展icons，直接在icons目录下添加新的svg文件即可。因为小程序的wxml不支持直接渲染SVG，所以只能通过图片的src来显示小程序。这种显示方式最大的问题是如何改变图标的??颜色。图标的颜色无法更改，因此需要对文件进行处理。实现思路：svg文件=>二进制字符串=>替换填充属性。具体的实现方式：/*components/SvIcon/index.wxss*/.icon-wrapper{显示：flex;对齐项目：居中；证明内容：居中；溢出：隐藏；}.icon{宽度：100%；height:100%;}//components/SvIcon/index.jsComponent({properties:{icon:{type:String,required:true},color:{type:String,value:'#f00'},size:{类型：数字，值：32}}，数据：{base:'icons/',iconPath:''},lifetimes:{attached(){const{base}=this.dataconst{icon,color}=this.属性constfilePath=`${base}${icon}.svg`constsvgBinary=wx.getFileSystemManager().readFileSync(filePath,'binary')constsvgBase64=`data:image/svg+xml,${encodeURIComponent(svgBinary.replace(/(#[a-fA-F0-9]{6})|(#[a-fA-F0-9]{3})/g,color))}`this.setData({iconPath:svgBase64})}}})然后，在app.json中全局注册：{...,"usingComponents":{"svg-icon":"。/components/SvgIcon/index"}}组件使用：（本文完）本文由OpenWrite发表，一个多帖博客平台发布！
