vue项目使用svg图片

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

(svg-sprite-loader以及vue2-svg-icon的使用)

第一种方式:

1、安装svg-sprite-loader

        npm install svg-sprite-loader --save-dev

2、webpack 配置(build/webpack.base.conf.js)

        vue项目使用svg图片

{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'//去掉svg这个图片加载不出来
}
},

{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
//这个不处理svg图片,因为我们独立拆开让svg-sprite-loader来处理了
exclude: [resolve('src/icons')],

options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},

3、创建svg的组件

        vue项目使用svg图片

<template>
<svg :class="svgClass" aria-hidden="true">
<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: 10rem;
height: 10rem;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

 4、创建文件夹存放svg的图标,同时注册svg组件到vue里面(index.js)

vue项目使用svg图片

单个使用如下:
import './assets/svg/target.svg';
<svg><use xlink:href="#target" /></svg>
嗯,就这样短短一行。xlink:href 中传入 svg ID 就好了,由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID,所以这里传入的 ID 即为你想显示的图标的 svg 文件名,记得加上 #。
所有svg文件自动导入
index.js代码如下,自动导入 src/icons/svg/ 下的 svg 文件。 

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

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

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
六、在main.js中引入
import Vue from 'vue'
import App from './App'
import router from './router'
//引入整个icons,
import './icons'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'

5、在vue中使用

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<svg-icon icon-class="smile" size="10"></svg-icon>

</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

第二种方式:

1、安装vue2-svg-icon

        npm install vue2-svg-icon --save-dev

2、引入main.js并注册组件

vue项目使用svg图片

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//import './icons/index.js'
//引入vue2-svg-icon并且注册组件
import Icon from 'vue2-svg-icon/Icon'
Vue.component('icon',Icon);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

3、新建存放svg图片的目录(这个包默认是从assets/svg下面找svg图片的,不要问我为什么

vue项目使用svg图片

4、vue页面使用svg组件

vue项目使用svg图片文章来源地址https://www.toymoban.com/news/detail-409750.html

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

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

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

相关文章

  • Sprite Editor图片编辑器的使用_unity基础开发教程

    SpriteEditor是Unity引擎中的一个工具,用于创建和编辑2D图片。它提供了一系列功能,可以对图片进行剪裁、切割、翻转、旋转、调整大小等操作,以及设置图片的碰撞检测形状和渲染模式。 SpriteEditor可以帮助开发者将多张图片合并成动画精灵,并为每一帧设置播放时间和循环

    2024年02月01日
    浏览(44)
  • 微信小程序里面如何使用svg图片

    首先准备一段svg代码如下: 然后按照下面的格式更改 也打开下面的网址转, https://codepen.io/jakob-e/pen/doMoML 将svg代码贴到下图中红线圈起来的位置,会自动转成base64, 然后将base64代码部分复制下来放到浏览器里面打开,可以看到结果. 最后在小程序里面使用,如下 结果:

    2024年02月11日
    浏览(67)
  • 【Unity Optimize】使用图集(Sprite Atlas)优化项目

    Unity中的图集(Sprite Atlas)是一种用于优化游戏性能和内存的纹理集。Sprite Atlas 可以应用于 2D 和 3D 项目中的 UI、粒子系统、贴图等等。 使用Unity可以很方便地创建Sprite Atlas,只需要创建一个Sprite Atlas GameObject,然后将纹理分配给它。在创建Sprite Atlas时,需要将纹理名称按角色

    2024年02月14日
    浏览(34)
  • 小白详解Vue3项目中怎么引入 SVG 图标

    今天一淘模板给大家来详解Vue3项目中怎么引入 SVG 图标具体流程 SVG 图标 既然是页面,肯定离不开一些图标 icon ,所以肯定要去最全的 阿里图标库 来寻找 这里讲解下如何将 阿里图标库 里面的东西,放到我们的页面上 阿里图标库 进入页面,找到 资源管理 下面的 我的

    2024年02月09日
    浏览(43)
  • 深入了解Vue-loader: 优化Vue.js项目开发的利器

      Vue-loader是一个用于加载Vue组件的webpack插件。它允许你编写单文件组件(SFC),并将它们转换为JavaScript模块,以便在浏览器中使用。这个工具非常有用,因为它可以帮助你在开发过程中更好地组织和管理你的Vue组件。 如何安装:  安装完毕后,你需要在webpack配置文件中添

    2024年01月17日
    浏览(48)
  • react umi中使用svg线上图片不加载问题

    参考链接: https://www.jianshu.com/p/c927122a6e82 前言: 在react项目中,我们本地通过img标签的src使用svg图片是可以加载的,但是发布到线上图片加载不出来。 解决方案 方案一 使用场景:直接在当前页面引入svg图片 有一个 svgr 插件,是支持以 react component 的方式,引入 svg 图片的。

    2024年02月11日
    浏览(37)
  • vue全局使用svg

    1、安装依赖 2、配置选项 在 vue.config.js 的 chainWebpack 里配置下面代码 解释:config.module.rule是一个方法,用来获取某个对象的规则。.exclude.add(文件a)是往禁用组添加文件a,就是对文件a进行禁用。.test(/.svg$/)是匹配到.svg结尾的文件 3、定义组件 把svg封装成组件,我们就可以以

    2023年04月18日
    浏览(37)
  • vue3 使用全局svg

    vite-plugin-svg-icos -D  包 不行就再安装 fast-glob -D main 引入 import \\\'virtual:svg-icons-register\\\' import SvgIcon from \\\'@/components/SvgIcon\\\' src 同级目录新建vite文件夹下的 plugins 文件夹 建一个svg-icon.js    和index.js 文件   在vite.config.js文件里  main.js 中注册 app.component(\\\'svg-icon\\\', SvgIcon) component文件新

    2024年02月08日
    浏览(38)
  • 在vue中使用svg(组件)

    vue项目中使用svg,有以下步骤: 1、安装  svg-sprite-loader  依赖 2、在  src  目录下新建  src/icons/svg  目录,存放项目所使用的所有图标  svg  文件      在  vue-config.js  中添加配置: 3、创建组件  components/SvgIcon.vue isExternal文件及作用 4、在  src/icons  目录下创建  icons  文

    2024年02月16日
    浏览(30)
  • Vue3中使用svg图标

    因为项目很多模块需要使用图标,因此把它封装为全局组件!!! 在src/components目录下创建一个SvgIcon组件:代表如下 在src文件夹目录下创建一个index.ts文件:用于注册components文件夹内部全部全局组件!!! 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

    2024年02月05日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包