VUE项目中为什么使用svg

1、在src/components下创建文件夹，命名为SvgIcon，并再SvgIcon文件夹下，新增目录index.vue文件：

　　2、在src目录下，新增文件夹，命名为icons，并再icons文件夹下，新增目录index.js文件和svg文件夹，其中svg文件夹里面存放的是svg文件。

以下是src/icons/index.js文件的内容：

3、在vue.config.js文件中，配置svg文件，其中chainWebpack里面的内容为svg的配置

4、在main.js直接引入inco文件夹

5、在页面直接使用组件svg-icon，其中incoClass命名等于svg文件的名称

VUE项目中为什么使用svg

在做图标展示时，一般使用fontawesome图标库，只用简单并且只需要下载并引入即可。

npm install font-awesome --save

但是发现身边也有人使用阿里巴巴的incofont，下载选择svg文件引入，具体封装和配置方法如下示：

以下操作是参考了已有框架的代码进行整理

安装依赖

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

1、在src/components下创建文件夹，命名为SvgIcon，并再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'}},styleExternalIcon() {return {mask: `url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`}}}}
</script><style scoped>.svg-icon {width: 1.5em;height: 1.5em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}.svg-external-icon {background-color: currentColor;mask-size: cover!important;display: inline-block;}
</style>

　　2、在src目录下，新增文件夹，命名为icons，并再icons文件夹下，新增目录index.js文件和svg文件夹，其中svg文件夹里面存放的是svg文件。

以下是src/icons/index.js文件的内容：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
// 注册为全局组件
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3、在vue.config.js文件中，配置svg文件，其中chainWebpack里面的内容为svg的配置

function resolve(dir) {return path.join(__dirname, dir)
}
const path = require('path')module.exports = {devServer: {port: 8000},configureWebpack: {name: projectName,resolve: {alias: {'@': resolve('src'),'views': resolve('src/views')}}},chainWebpack(config) {config.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()}}

4、在main.js直接引入inco文件夹


// 引入全局inco
import '@/icons'

5、在页面直接使用组件svg-icon，其中incoClass命名等于svg文件的名称


<svg-icon iconClass="example"/>
<svg-icon iconClass="message"/>

在vue项目中使用svg图标相关推荐

如何在VUE项目中使用svg图标
一文带你搞定svg图标的使用! 文章目录前言一.SVG相较于字体图标的优点二.使用步骤 1.新建一个vue2项目 2.安装项目依赖 3 .在src目录下新建文件夹 4.创建svg-icon组件 ...
html js使用svg图标,Vue项目中使用svg图标
1,安装依赖 Vue项目的运行少不了安装依赖,使用svg同样. npm install svg-sprite-loader --save-dev 2,配置项目中找到build文件夹中的webpack ...
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
在Vue项目中使用svg标签却无法改变图标的颜色在学习 vue 实战项目的过程中,用到了 svg 模块,对其使用了 fill 属性后,图标的颜色却没有任何的改变,反复查看了视频,步骤是一模一样的,却 ...
Vue项目中使用Svg矢量图标
#Vue项目中使用Svg矢量图标使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装 ...
Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
vue项目中设置网站图标
怎么在vue项目中设置网站图标: 1,先下载个icon图标,favicon.ico,大小为32*32的,放到static文件夹下: static文件是vue项目中用来存放静态资源的文件夹,放到这里的文 ...
vue 项目种使用svg图标
一般常用的代码写法: <svg-icon class-name="size-icon" icon-class="size"/> svg 图标可以随字 ...
vue项目中使用iconMoon图标
前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...
在vue项目中设置网站图标
怎么在我们的Vue项目中设置自定义的网站图标: 首先我们需要先制作个ico图标,大小为32*32的,放到static文件夹下,附制作网站,我们把制作好的ico图片改名为:favicon.ico(注:必 ...

在vue项目中使用svg图标

VUE项目中为什么使用svg

安装依赖

1、在src/components下创建文件夹，命名为SvgIcon，并再SvgIcon文件夹下，新增目录index.vue文件：

2、在src目录下，新增文件夹，命名为icons，并再icons文件夹下，新增目录index.js文件和svg文件夹，其中svg文件夹里面存放的是svg文件。

以下是src/icons/index.js文件的内容：

3、在vue.config.js文件中，配置svg文件，其中chainWebpack里面的内容为svg的配置

4、在main.js直接引入inco文件夹

5、在页面直接使用组件svg-icon，其中incoClass命名等于svg文件的名称

在vue项目中使用svg图标相关推荐

最新文章

热门文章