在电脑上怎么做网站,如何免费建个人网站,昆明网站建设公司_,网站建设团队技术介绍IconFont使用的不足#xff1a;图标添加、修改、删除以后在线链接需要更新离线资源需要重新下载项目代码需要同步更新。
在项目不断更新和迭代的过程中#xff0c;图标的增减变化还没有稳定的情况下#xff0c;开发人员的工作效率会明显下降。
那么有没有一个图标应用方式…IconFont使用的不足图标添加、修改、删除以后在线链接需要更新离线资源需要重新下载项目代码需要同步更新。
在项目不断更新和迭代的过程中图标的增减变化还没有稳定的情况下开发人员的工作效率会明显下降。
那么有没有一个图标应用方式就是开发人员如果新增修改删除某一图标那么就仅仅只是操作这一目标图标即可。如果有新增则直接从图标平台上下载新增图标到项目目录中如果有修改则直接将修改以后的图标将项目中原有的图标内容进行替换。如果是删除则直接将图标从项目目录中进行直接删除即可。
那么以下的方法就可以解决这个问题
那么在vite环境中的vue3项目中如何实现svg图标的使用。
第一步下载
npm i vite-plugin-svg-icons -D
第二步修改vite.config.ts文件
iconDirs的作用就是扫描项目指定目录中的svg图标资源文件
注意需要通过path.resolve将相对路径转换成绝对路径方可成功
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import { createSvgIconsPlugin } from vite-plugin-svg-icons;
import path from path;export default defineConfig({Plugins:[vue(),createSvgIconsPlugin({iconDirs:[path.resolve(process.cwd(),src/assets/svg-icons)]})]
})
第三步封装使用SVG的组件src/components/SvgIcon.vue
该组件接收prefix前缀name名称color颜色三个属性。prefix和name名称将会进行computed计算。symbolId将会标致将会使用那个svg图标而color颜色将会运行开发人员对图标进行颜色的设置操作。
templatesvg aria-hiddentrueuse:hrefsymbolId:fillcolor//svg
/template
script langts
export default {name:SvgIcon,
};
/script
script setup langts
import { computed } from vue;
const props defineProps({prefix:{type:String,default:icon,},name:{type:String,require:true,},color:{type:String,default:#333,},
});
const symbolId computed(() #${props.prefix}-${props.name}
)
/script
第四步项目入口文件main.ts
在这里需要引入SvgIcon组件并使用app.component()进行全局注册
并将virtual:svg-icons-register进行引入利用它进行SvgIcon功能脚本的注入操作。
import { createApp } from vue;
import App from ./App.vue;
import SvgIcon from ./components/SvgIcon.vue;
import virtual:svg-icons-register;const app createApp(App);
app.component(SvgIcon.name,SvgIcon);
app.mount(#app);
第五步下载图标
现在可以从IconFont图标库中下载一些图标并放到指定的目录中 第六步应用
直接调用SvgIcon组件就可以进行直接的使用了。
templateSvgIcon namehome coloryellow /SvgIcon namevideo /SvgIcon namecat-octocat /
/template
