vue router meta icon 引用svg 无法改变颜色的问题

最新推荐文章于 2024-06-11 16:34:11 发布
最新推荐文章于 2024-06-11 16:34:11 发布
阅读量810 收藏
点赞数
分类专栏： 日常问题总结 文章标签： vue.js javascript 前端 svg css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua222/article/details/126123510
版权

问题：在替换某个svg图标的时候，发现怎么改css样式都没法改变颜色，怀疑人生的同时怀疑这个svg是不是一个正常的svg…

在尝试很多各种css调试都没法改变这个svg的颜色之后，只能把问题定位到这个svg本身。

在这里插入图片描述

  • 解决办法： 找到svg代码里的fill=“XXX”，删掉就好了

Endless Daydream233
关注
专栏目录
antd vue 自定义侧边栏svg图标、并改变图标颜色
zyf971020的博客
12-05 3309
antd vue 自定义侧边栏svg图标、并改变图标颜色
vue项目改图标_vue使用自定义icon图标的方法
weixin_39766071的博客
12-19 3631
首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家效果图：推荐使用阿里爸爸矢量图标管理，iconfont使用方法 登录账号，找到需要的图标加入购物车然后添加到项目再然后下载代码到本地下载代码文件然后解压出现这列表打开HTML文件，引用方法教程补充我人的坑，之前想着在style标签里@import ""，结果一直报错，试...
vue svg组件中svg图标颜色无法修改，解决方案！
weixin_49875932的博客
01-10 2113
1.原因是因为svg源文件中fill 设置了颜色，导致无法通过类名去修改。2.解决方案为 将fill设置为fill="currentColor"
vue3使用svg 动态修改颜色（记录：修改fill无效）
最新发布
cwdWendy的博客
06-11 1305
5.像动态修改颜色直接给svg标签设置css(注意：如果修改fill无效 需要把svg文件内容进行修改，加上fill="currentColor")2.在vite.config.ts中加配置（我的文件放在public下）3.在main.ts中加。
自定义 svgIcon 组件无法修改svg文件颜色问题修复
TangAcrab的博客
09-06 1332
解决svg图标无法修改颜色问题
vue 路由元信息meta属性应用
记录点滴
10-15 3532
用keep-alive通常缓存组件会这样做： <keep-alive> <router-view></router-view> </keep-alive> 如果想单独缓存哪一些组件需要这样： <keep-alive> <component-A></component-A> <...
vue：路由配置 meta 的 menu 和 icon
热门推荐
1363648943的专栏
12-18 1万+
首先，我引用的是antd vue 的这套UI。 可以在 computed 中打印出 this.$router 下面的东西，是获取的路由中配置的菜单和 icon。 代码图和代码请看下面文件配置 menu.js 文件配置后代码如下： 首先，我引用的是antd vue 的这套UI。 可以在 computed 中打印出 this.$router 下面的东西，是获取的路由...
说一说实战项目升级从vue2到vue3 之router
weixin_44191425的博客
01-24 1358
先附上vue-router 官方文档访问地址https://router.vuejs.org/zh/ router.js vue2 写法： import Vue from 'vue' import VueRouter from 'vue-router' import Layout from '../layout' import modules from './modules/require' Vue.use(VueRouter) const routes = [{ redirect: '/',
vue-router 跳转 及 渲染 及安全问题
weixin_44191425的博客
09-09 629
最近开发一个新项目，过安服测试的时候有一些低危的问题，但是觉得又有必要去给他解决。 第一个问题则是，未登录情况下，通过改变地址栏问题能够访问到页面，暴露接口问题，虽然这个一开始就是产品设计考虑不周到，加上开发时间又十分紧迫，所以后期才来补一下这个安全问题。 解决方法当然就是利用理由的beforeEach了。 // 全局路由钩子 router.beforeEach((to, from, next) => { const pathName = to.name // 判断该路由是否需要登录权限
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
混子还在路上
05-17 2154
在Vue项目中使用svg标签却无法改变图标的颜色 在学习 vue 实战项目的过程中，用到了 svg 模块，对其使用了 fill 属性后，图标的颜色却没有任何的改变，反复查看了视频，步骤是一模一样的，却发现还是不行，差点怀疑人生，代码如下： <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="svgUrl"></use> </svg&
html5页面 meta icon,常用HTML meta 标签
weixin_35252187的博客
06-04 1245
html meta必要属性属性值描述contentsome text定义与http-equiv或name属性相关的元信息可选属性属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。nameauthor / description / keywords / generator / revised...
html5页面 meta icon,HTML5常用<meta>屏幕适配标签设置
weixin_34006872的博客
06-04 659
适应手机端width - viewport的宽度 height - viewport的高度initial-scale-初始的缩放比例minimum-scale-允许用户缩放到的最小比例maximum-scale-允许用户缩放到的最大比例user-scalable-用户是否可以手动缩放下面是我们经常用到的一些标签，由于浏览器的差异，并不能百分百兼容在iPhone 手机上默认值是(电话...
html5页面 meta icon,htmlMeta标签小集
weixin_39619433的博客
06-04 391
Meta标签可分为两大部分，HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。下表表述的是HTTP标题信息。表1 HTTP标题信息(HTTP-EQUIV)表content-type显示字符集refresh让页面指定时间刷新自己，或者跳转expires指定网页缓存的过期时间cach是否允许浏览器从本地机器调阅缓存set-cookie是否禁用cookie或者使cookie失效wind...
vue中动态修改网页图标
一条咸鱼的blog
05-12 2254
当针对不同客户需要提供不同的图标时，页面其他图标好替换，但是网页图标就不太一样了，查阅之后提供如下方法： <script> let headHTML = document.getElementsByTagName('head')[0].innerHTML; let baseUrl = "<%= BASE_URL %>" headHTML += '<link rel="icon" href="'+baseUrl+pt_logo+'.ico"&g
vue使用中icon图标失效问题（已解决）
weixin_50433115的博客
12-17 3070
这是因为从ElementPlus@1.20起icon包改名了，站在要用import {图标名字} from '@element-plus/icons-vue'
vue问题记录svg-icon报错，iconclass
Y4258的博客
06-17 2848
svg-icon在vue项目中的使用
vue-element-admin之修改侧边栏的icon图标
weixin_40571937的博客
08-05 5717
修改侧边栏的icon图标 如果在vue-element-admin官方提供的icon库中没有我们需要的图标，可以到https://www.iconfont.cn/上选择并生成自己的业务图标库 1. 在vue-element-admin官方提供的icon库中找图标。 在vue-element-admin指南中可以看到这句话，我们来实际操作一波 2. 在iconfont网站上 在图标仓库里可以搜索我们需要的图标 把我们下载的icon图标的svg文件复制到/src/icons/svg文件夹下 在如图所示，
svg修改颜色失败-解决svg 自带 fill 的问题
weixin_47192515的博客
08-28 8388
修改图标颜色失效，发现svg文件会自带一个 fill 属性，导致颜色修改失效。
vue router meta
06-02
在 Vue Router 中，可以通过 `meta` 字段来定义一些元信息（meta information），这些元信息可以用于控制路由的访问权限、页面标题、页面描述等。`meta` 字段是一个对象，可以包含多个属性，常见的属性有： - `title`：页面标题，显示在浏览器标签页中。 - `description`：页面描述，用于搜索引擎优化。 - `requiresAuth`：布尔值，表示该页面是否需要登录才能访问。 - `roles`：数组，表示该页面需要的用户角色列表。 - `permission`：字符串，表示该页面需要的权限名称。 可以在路由配置文件中为每个路由定义一个 `meta` 字段，例如： ```javascript const routes = [ { path: '/', name: 'Home', component: Home, meta: { title: '首页', description: '这是我的博客首页' } }, { path: '/about', name: 'About', component: About, meta: { title: '关于我', description: '这是我的个人简介页面' } }, { path: '/dashboard', name: 'Dashboard', component: Dashboard, meta: { title: '控制面板', requiresAuth: true, roles: ['admin', 'editor'], permission: 'dashboard.view' } } ] ``` 在应用程序中，可以通过 `router.beforeEach` 钩子函数来验证路由的元信息，例如： ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated) { next('/login') } else if (to.meta.roles && !hasRole(to.meta.roles)) { next('/403') } else if (to.meta.permission && !hasPermission(to.meta.permission)) { next('/403') } else { next() } }) ``` 在上面的代码中，如果访问的路由需要登录才能访问，但是当前用户没有登录，则会重定向到登录页面；如果访问的路由需要特定的用户角色或权限，但是当前用户没有相应的权限，则会重定向到 403 页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值