Vue项目中使用svg图标
2023-09-11 14:17:56 时间
svg的图片有着颜色自定义大小自定义的优势。在阿里图标库可以下载svg图片。 那么在vue框架中我们该怎么使用svg图片呢 这个时候就用到了 webpack 插件 svg-sprite-loader 首先呢自然就是安装了 npm i svg-sprite-loader --save 创建svg文件目录/src/icons/svg 里面呢放置所有svg文件 还有/src/icons/index.js //index.js import Vue from 'vue' import SvgIcon from '@/components/SvgIcon' /* require.context("./test", false, /.test.js$/); 这行代码就会去 test 文件夹(不包含子目录) 下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。 更直白的说就是 我们可以通过正则匹配引入相应的文件模块。 require.context有三个参数: directory:说明需要检索的目录 useSubdirectories:是否检索子目录 regExp: 匹配文件的正则表达式 */ // 全局注册 Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req) 在 webpack.base.conf.js 文件中添加 rules 配置 //webpack.base.conf.js { test: /\.svg$/, loader: "svg-sprite-loader", include: [path.resolve(__dirname, '../src/icons/svg')],//包括字体图标文件 // options: { //symbolId: 'icon-[name]' //这个没有生效,生效的是默认的name // } } 然后修改 url-loader 配置 //webpack.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader", exclude: [ path.resolve(__dirname, '../src/icons/svg'), //排除字体图标文件 ], options: { limit: 10000, name: utils.assetsPath("img/[name].[hash:7].[ext]") } } 创建 vue 组件 svg-icon <!-- @/components/SvgIcon --> <template> <svg :class="svgClass" aria-hidden="true" @click="$emit('click')"> <use :xlink:href="iconName"></use> </svg> </template> <script> /** * svg 图标组件 * iconClass="图标名称" * className="风格名称" */ export default { name: 'svg-icon', props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { iconName () { return `#${this.iconClass}` }, svgClass () { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } } } </script> <style scoped> .svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 在main.js中引入 import './icons/index.js' 这样就能在vue中使用了 具体格式如下 <svg-icon icon-class="svg文件名"/>
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue - 安装引入 WangEditor V5 富文本编辑器后控制台报错(Nuxt.js 项目同样适用):$attrs is readonly 、 $listeners is readonly
- Vue - cli3 脚手架搭建项目步骤流程(windows)
- Vue组件间的通信【子传父,父传子,同级传递,爷孙传递】
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue 项目中使用scss
- vue引入外部js数据
- 【Vue】Vue2做项目时遇到的小bug,简单总结一下~
- Vue懒加载
- vue实战入门后台篇九:springboot+mybatis实现网站后台-代码整合及重构优化
- vue实战入门后台篇一:springboot+mybatis实现网站后台-项目框架搭建
- vue实战入门基础篇十:从零开始仿门户网站实例-代码重构并发布项目
- Vue基础知识之目录
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- Vue之动态绑定CSS样式
- Django+Vue项目学习第九篇:vue项目部署到服务器
- vue 侦听器watch 之 深度监听 deep