使用svg-sprite-loader 遇到的问题

最新推荐文章于 2024-08-10 14:10:41 发布

fluor

最新推荐文章于 2024-08-10 14:10:41 发布

阅读量921

点赞数 2

分类专栏： javascript 文章标签： vue js

本文链接：https://blog.csdn.net/Shen_yuanjia/article/details/111703469

版权

本文介绍了在Vue项目中如何安装和配置svg-sprite-loader，包括封装组件的目录结构和修改Webpack配置的步骤。在Webpack配置中需注意排除已引入svg的url-loader，并展示了在业务代码中使用svg-sprite-loader的关键技巧。

摘要由CSDN通过智能技术生成

安装 svg-sprite-loader

npm install svg-sprite-loader --save

封装组件

目录结构

.
│  App.vue
│  main.js
├─components
│  └─SvgIcon
│          index.vue
│               
├─router
│      index.js
│      
├─store
│      actions.js
│      index.js
│      mutations.js
│      
├─svgIcons
│  │  index.js
│  │  
│  └─svg
│          certification.svg
│

给看官老爷奉上code

cd src/components/SvgIcon/index.vue

<template>
    <svg :class='svgClass' aria-hidden="true" v-on="$listeners">
        <use :xlink:href='iconName' />
    </svg>
</template>

<script>
export default {
    name: "SvgIcon",
    props: {
        iconClass: {
            type: String,
            required: true
        },
        cl