vue全局使用svg

这篇具有很好参考价值的文章主要介绍了vue全局使用svg。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、安装依赖

 npm install svg-sprite-loader

2、配置选项
vue.config.jschainWebpack里配置下面代码
解释:config.module.rule是一个方法,用来获取某个对象的规则。.exclude.add(文件a)是往禁用组添加文件a,就是对文件a进行禁用。.test(/.svg$/)是匹配到.svg结尾的文件

config.module
			.rule('svg')
			.exclude.add(resolve('src/icons')) //对应下面配置svg的路径
			.end();

		config.module
			.rule('icons')
			.test(/\.svg$/)
			.include.add(resolve('src/icons')) //对应下面配置svg的路径
			.end()
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			.options({
				symbolId: 'icon-[name]'
			});

3、定义组件
把svg封装成组件,我们就可以以组件的形式调用svg图片。在components下面写组件。
vue全局使用svg

componnets/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
      },
      className: {
        type: String,
        default: ''
      }
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      },
      svgClass() {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    }
  }
</script>
 
<style scoped>
  .svg-icon {
    width: 10em;
    height: 10em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

4、存储图片,全局注册
创建文件目录,放置svg图片
我把svg图片放在src/icons/svg文件夹下,然后再将svgIcon注册为全局组件
vue全局使用svg
src/icons/index.js:

import Vue from 'vue'
import SvgIcon from '@/components/svgIcon/index'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

5、全局引入
在mian.js中引入注册文件

import './icons'

6、使用
例如有一张图片rain.svg,路径是icons/svg/rain.svg,然后直接用名称就可以调用。这里的className是自定义样式文章来源地址https://www.toymoban.com/news/detail-417146.html


//<svg-icon icon-class="图片名" className="样式类"></svg-icon>
<svg-icon icon-class="rain" className="iconBig"></svg-icon>

到了这里,关于vue全局使用svg的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用 npm install安装依赖时报错 npm ERR! Error while executing

    问题描述:vue-element-admin使用 npm install安装依赖时报错 npm ERR! Error while executing 解决办法1:(没有解决我的问题) 执行如下命令: 再执行 npm install 就可以了 如果上述命令执行完后,还是报那个错误,请继续执行如下命令,亲测有效 解决办法2:(解决了我的问题!!!)

    2024年02月11日
    浏览(228)
  • 报错:在从 Git 上拉取代码后,使用 npm install 安装依赖失败,但使用 yarn 可以成功安装,这是为什么

    在从 Git 上拉取代码后,使用 npm install 安装依赖失败,但使用 yarn 可以成功安装的原因可能有多种,以下是一些常见原因: 安装的依赖库版本不兼容。有时候,package.json 文件中的依赖库版本与本地或全局的 Node.js 环境不兼容,或与已安装的其他依赖库的版本不兼容,在使用

    2024年02月08日
    浏览(59)
  • Svg使用和注册components文件夹内部全部为全局组件

    Vue2+Js中使用(vue只注册了Svg) 1. 安装插件 2. 封装Svg组件 3. 在assets/icons文件夹下创建index.js 4. vue.config.js 5. main.js中引入 Vue3+Ts中使用(一次性将components下的所有组件都注册了)  1.安装SVG依赖插件 2. 封装SvgIcon 3. 在src/components文件夹目录下创建一个index.ts文件:用于注册comp

    2024年02月13日
    浏览(32)
  • 解决npm install报错npm ERR Unsupported URL Type “npm:“: npm:vue-loader@^16.1.0 问题

    node版本以及npm版本太旧会造成这个问题 1.下载安装nvm 网址:Releases · coreybutler/nvm-windows · GitHub 2.安装 后使用nvm命令安装切换node版本 安装node版本: 等待安装完成,使用命令切换版本 3.如遇到切换完版本idea提示无法识别npm命令,重启idea即可

    2024年04月15日
    浏览(87)
  • 解决使用conda env create -f environment.yml安装依赖包时Installing pip dependencies过慢的问题

    问题描述 使用conda env create -f environment.yml安装依赖包时,会遇到Installing pip dependencies过慢的问题。这是由于没有使用镜像源。如下图所示 解决方案 可以尝试对environment.yml文件进行以下修改,添加镜像源即可: 将channels改为(注意要把default去掉): 并在pip的依赖包里添加上镜

    2024年02月12日
    浏览(51)
  • vue项目启动npm install和npm run serve时出现错误Failed to resolve loader:node-sass

    解决方法: 解决方法: node sass-node loader-sass 14.16.0 4.14.1 8.0.2

    2024年04月26日
    浏览(51)
  • 安装依赖不成功(npm install)

    遇到无法解析依赖树的问题(依赖冲突) 执行 npm install --legacy-peer-deps 在package.json文件中,存在一个叫做peerDependencies(对等依赖关系)的对象,它包含了项目里需要的所有的包或则用户正在下载的版本号相同的所有的包,意思就是对等依赖关系指定我们的包与某个特定版本的

    2024年02月12日
    浏览(62)
  • 【解决问题】Vue 项目中安装依赖 npm install 一直报错

    在 GitHub 上面找了几个项目,下载下来想执行以下,首先根据 README 文档进行安装依赖: 但接下来就一直报错,报错信息如下: 搜寻了好多种解决方法,依然不行,最后看到一篇博客说是  C盘 User 文件夹中的  .npmrc 文件 的问题,于是我尝试删除该文件,再次进行  npm inst

    2024年02月02日
    浏览(77)
  • CMake Install 安装第三方依赖库

    cmake 提供 install 命令来安装文件,方便打包。但是有时也会对第三方依赖库有需求一起打包,在不确定第三方库dll文件路径和名称的情况下,需要另一种方式来打包了。 比如想要打包opencv_world.dll,一般cmake依赖opencv的方式是通过第三方软件包(* -config.cmake)的方式: 那么在

    2024年02月14日
    浏览(43)
  • 前端项目 npm install 安装依赖报错及解决办法

    目录 第一种:Error: Cannot find module \\\'gifsicle\\\' 第二种:Error: Cannot find module \\\'imagemin-gifsicle\\\' 第三种:Error: Cannot find module \\\'array-includes\\\' 前端项目安装依赖,遇到过的问题: 第一种: Error: Cannot find module \\\'gifsicle\\\' 原因是对应的模块 image-webpack-loader 未安装好 解决办法: 卸载重新安装

    2024年02月04日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包