vue项目引入svg图标的完整步骤

目录
  • 1. 安装svg依赖
  • 2. 创建svg文件夹存放svg图标
  • 3. vue.config.js 中配置svg图片
  • 4. 创建index.js 导入所有svg图标
  • 5. main.js中引入icons/index.js
  • 6. 创建SvgIcon公用组件
  • 总结

1. 安装svg依赖

在vue中首先需要安装可以加载svg的依赖。

npm安装：npm install svg-sprite-loader --save-dev

2. 创建svg文件夹存放svg图标

创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标。

3. vue.config.js 中配置svg图片

vue.config.js代码：

const path = require('path')

module.exports = {
  chainWebpack:config=>{
    // svg图标加载
    config.module
      .rule('svg')
      .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
      .end()

    config.module
      .rule('icons')// 定义一个名叫 icons 的规则
      .test(/\.svg$/)// 设置 icons 的匹配正则
      .include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
      .end()
      .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
      .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
      .options({// 该 svg-sprite-loader 的配置
        symbolId:'icon-[name]'
      })
      .end()
  }
}

include.add(路径)–路径不正确会报以下错误：

4. 创建index.js 导入所有svg图标

icons文件夹创建index.js 自动导入所有svg图标。

icons/index.js代码：

const req = require.context('@/assets/icons/svg',false,/\.svg$/)
const requireAll = requireContext =>{
    // requireContext.keys()数据：['./404.svg', './agency.svg', './det.svg', './user.svg']
    requireContext.keys().map(requireContext)
}
requireAll(req)

执行 requireContext.keys().map(requireContext)得到返回的数据：

5. main.js中引入icons/index.js

6. 创建SvgIcon公用组件

SvgIcon/index.vue代码：

<template>
    <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
    <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="`#icon-${iconFileName}`" rel="external nofollow"  />
    </svg>
</template>

<script>
export default {
    name: 'SvgIcon',
    props: {
        iconFileName: {
            type: String,
            required: true
        }
    }
}
</script>

<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: -0.15em;
    fill: currentColor;
}
</style>

全局注册SvgIcon组件：

使用SvgIcon组件：

vuecli 中 chainWebpack 的常用操作

使用require.context实现前端工程自动化

总结

到此这篇关于vue项目引入svg图标的文章就介绍到这了,更多相关vue项目引入svg图标内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 教你在vue项目中使用svg图标的方法

    svg图标优点 svg与iconfont之类的字体图标在网页中的使用差别不大,可以修改大小,颜色等而且不失真. 安装svg-sprite-loader npm install --save-dev svg-sprite-loader 文件夹目录 (xxx.svg 注意:这里的 xxx 不要使用中文) - assets -- icon --- svg --- index.js 配置依赖 // Vue2.x 在 webpack.base.conf.js 中配置如下: // 注意svg图标的路径 sr

  • vue动态加载SVG文件并修改节点数据的操作代码

    先上一个马赛克图片叭. 接领导需求,动态实现电路图, 并附带放大.缩小功能. 以及不同的回路点击能弹窗显示相关节点的更多信息, 通俗一点讲: 随着用户点击放大和缩小, 点击位置保持不变,而且能实现点击交互. 初接触的时候,觉得根本没法下手呀,说说自己的思路叭, 从随着用户点击放大缩小位置不变,想到了SVG 但是需要动态加载进来呀,而且还需要需求不同节点的电流值, 从放大缩小来看, 首先想到的是 D3 在集合领导给的部分相关资料 综上: 进行了可行性的方案试探,也完成了整个功能的开发. 且听我细细

  • vue项目中自动导入svg并愉快的使用方式

    目录 引入图标的几种方式 远古时代 iconfont时代 svg时代 处理loader,对指定目录svg文件处理 安装loader 配置vue.config.js 接下来使用vue inspect看下目前的配置 编写一个自定义组件 编写一个js,实现svg自动化 至此就可以愉快的使用svg了 压缩优化 引入图标的几种方式 远古时代 一个个小图标png图片引入,代码中在一个个引用 spirit图片,将多个图标放在一张png图片上,通过background属性显示对应的图标 iconfont时代 将

  • vue项目引入svg图标的完整步骤

    目录 1. 安装svg依赖 2. 创建svg文件夹存放svg图标 3. vue.config.js 中配置svg图片 4. 创建index.js 导入所有svg图标 5. main.js中引入icons/index.js 6. 创建SvgIcon公用组件 总结 1. 安装svg依赖 在vue中首先需要安装可以加载svg的依赖. npm安装:npm install svg-sprite-loader --save-dev 2. 创建svg文件夹存放svg图标 创建icons文件夹,在icons文件

  • vue项目引入Iconfont图标库的教程图解

    在进行项目开发过程中,vue项目中前端所使用的UI框架是element ui,但是element的字体图标库不足以满足日常开发的需要,或者公司项目要求使用本公司ui设计的图标,都可以参考以下的步骤, 1. 在阿里图标库中选中你想要的图标库,并点击进去, 2. 注意: 我们在选择图标是后,如果是需要多个图标就将选中的图标加入购物车,但是如果我们没有在这一个图标库中找到自己需要的图标时,可以去其他的图标库中进行选择,但是要记住离开这个图标库的时候,记得将选择的图标加入自己创建的项目中, 不然去其他图

  • Vue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    Vue中引入svg图标的方式 Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName&quo

  • 解决vue 项目引入字体图标报错、不显示等问题

    问题:在项目开发时使用字体图标,发现两个问题: 1.出现报错: 解决方法为:把字体引入方式改为绝对路径 2.不报错,但是不显示图标字体,出现方框 原因可能有两种: ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入) ②这个就是我遇到的问题,浪费了我好几分钟!!!微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写. 以上这篇解决vue 项目

  • Vue项目打包并发布的完整步骤记录

    Vue项目打包并发布的完整步骤记录

    目录 1.安装部署Nginx服务器.(类似Tomcat服务器) 2.Vue项目打包. 总结 如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1.安装部署Nginx服务器.(类似Tomcat服务器) 说明:Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.同时,也是一种轻量级的Web服务器,可以作为独立的服务器部署网站. (1)官方下载网址:http://nginx.org/ (2)下载之后,得到

  • Vue项目引入PWA的步骤

    Vue项目引入PWA的步骤

    Vue项目引入PWA很简单,操作步骤如下: 1. 安装依赖 vue add @vue/pwa 由于使用add关键字,安装成功后会在项目中创建一些文件,如果项目使用了git,可以很容易的看出文件变化: src文件夹下会生成一个registerServiceWorker.js文件,并在main.js中导入,这个文件自动生成了注册service worker的代码.registerServiceWorker.js的代码如下: import { register } from 'register-ser

  • vue element项目引入icon图标的方法

    为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建. 2.点击添加到项目后,选中第二个 3.点击更多操作里面的

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • vue项目中使用tinymce编辑器的步骤详解

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

  • vue项目打包以及优化的实现步骤

    vue项目打包以及优化的实现步骤

    目录 vue项目的打包上线及优化 vue项目的打包 项目托管 项目的常见优化 vue项目的打包上线及优化 项目完成,我们会将项目进行上线,为了提升性能,我们往往会进行一些优化处理 vue项目的打包 脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包 打开终端,切换到项目根目录 输入命令:npm run build 会在当前项目的根目录下生成一个dist文件夹,里面就是打包后的文件 项目托管 我们可以创建一个简易的node服务器来托管打包后的项目,这样就可以模

随机推荐