Vue开发使用SVG

在我们的开发过程中呢,经常会使用SVG来实现我们的icon等功能,那我们在 使用的过程中需要做好哪些配置呢?

首先我们需要下载对应的依赖包:

下载完依赖包后我们需要在vite.config.ts做出对应的配置:

我们需要在assets文件夹下面创建一个icons文件夹,用来放在我们的SVG的图标

接下来我们就可以使用了:

需要注意的是 svg:图标外层容器节点,内部需要与use标签结合使用, xlink:href执行用哪一个图标,属性值务必#icon-图标名字

在我们的项目中 使用的时候让我们的代码看起来整洁,方便复用我们可以封装一个公共的全局组件

在使用 的时候只需要动态的传入对应的值就可以了


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容