.icon-svg{width:1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；overflow:hidden;}iconfont的symbolreference结合Quasar组件Svg-icons实现字体库的动态加载具体来说就是在左侧菜单中选择icon。图标库使用了iconfont和symbolreference，需要动态读取阿里字体库文件的图标加载到项目中。动态读取图标库的好处是，用户可以自己制作一套图标，配置到项目中的字典项中，然后代码不需要修改，更灵活，更方便用户使用实现个性化网站。代码实现的大致思路是：阿里图标会生成符号在线链接。通过生成的符号链接，可以看到这是一个js文件，通过接口请求读取js文件的内容（跨域，在运维做的项目中可以帮忙配置），然后匹配content中的symbolid="获取每个图标的类名，从而获取所有文件中图标的类名集合，然后动态加载工程。具体代码实现下面一步步讲解。要实现iconfont的symbolreference，iconfont的symbolreference指的是上面使用symbolreference的步骤，并应用到项目中，这里由于项目使用了Quasar框架，结合Quasar组件Svg-icons实现.因为我们要动态加载库，所以不需要复制链接硬编码到项目中。直接从第二步开始，第二步和第三步的内容可以放在一个组件中：代码如下：.icon-svg{width:1em;高度：1em；垂直对齐：-0.15em；填充：当前颜色；overflow:hidden;}配置字典项中使用的阿里云图标库是这个。在这里上传或修改图标后，会重新生成图标库的在线链接。每次图标变化，需要在工程中更改新字体图标库的链接，修改字典iconfont中的数据值。一个词典条目可以添加一个或多个阿里图标库的链接。亮点：代码首先准备接口requestapi://menuiconfontdictionaryitemexportfunctiongetMenuIcon(){returnrequest({url:'/xxx/dict/type/iconfont',//dictionaryiteminterfacemethod:'get'})}//读取阿里云图标库文件导出函数getIconSymbol(url){returnrequest({baseURL:process.env.ICON_URL,//运维配置的代理服务器url:url,//只有名称需要js文件的方法：'get'})}然后在菜单管理页面加载选择图标下拉框的数据：getIconList(){getMenuIcon().then(async({data})=>{if(data.code===0){consticonfontList=data.data.map(_=>_.value)letallSymbol=[]//读取阿里云字体库文件for(letindex=0;index_[1])allSymbol=allSymbol.concat(symbol)}//console.log('所有文件的图标集合：'+allSymbol)this.stringOptions=allSymbolthis.iconOptions=extend(true,this.stringOptions,this.iconOptions)}})}，先获取文件的路径，然后通过接口请求读取js文件的内容，再匹配内容中的符号id="得到每个图标的类名，最终得到所有文件的图标类名集合，同时动态加载js文件其中，动态插入脚本如下：//动态插入scriptexportfunctionloadScript(src){consts=document.createElement('script')s.type='text/javascript's.src=srcdocument.body.appendChild(s)}下拉框由Quasarselect组件实现：filterFn(val,update){if(val===''){update(()=>{this.iconOptions=this.stringOptions})return}update(()=>{constneedle=val.toString().toLowerCase()this.iconOptions=this.stringOptions.filter(v=>v.toLowerCase().indexOf(needle)>-1)})}效果如下：菜单管理中配置的图标会相应显示在左侧菜单中，需要一个global加载图标库：actions://获取字体库GetFontList({commit}){returnnewPromise((resolve,reject)=>{getMenuIcon().then(({data})=>{if(data.code===0){consticonfontList=data.data.map(_=>_.value)//动态加载阿里云字体库iconfontList.forEach(ele=>{loadScript(ele)})}resolve()}).catch(e=>{reject(e)})})}IconSvg组件也用于在左侧菜单组件中显示图标：created(){this.$store.dispatch('app/GetFontList')}，如果图标库不能在这里获取，那么图标可能不会显示。最大的问题是可能有很多字库js文件重复加载。那就没办法了，因为一旦换了图标库，每次都要重新设置字典项，重新加载。确保字体文件与正确的图标文件是最新的。
