当前位置: 首页 > article >正文

svgicon大小问题(简单记录

Prob.:
react+ts下用类似import XxxIcon from "../icons/xxx.svg语句之后使用< XxxICon >标签,不能直接用style指定大小
(viewbox好像是有效的,height和width类似只改了画布大小,没缩放里面的path)

过程:
前面的问题是在改一个已有的项目的时候发现的
npx create-react-app my-app --template redux 直接搭的一个ts+react+redux的项目,然后发现里面的svg引入是用< img>标签包的,这个可以用style缩放大小,类似:

import logo from "./logo.svg";
<img src={logo} style={{ height: "50px" }}></img>

甚至这个项目目前是不能直接使用< XxxICon >标签,查了一下需要在“webpack.config.js”里面加svgr的配置,然后覆盖原来的配置(?)(待研究)

在原来这个项目里不能像原来这样用img标签()

但尝试发现可以把svg文件打开,不动svg的viewBox,只把width和height改成100%,
<svg width="100%" height="100%" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
然后在在icon里面内联style加height 是可以的
<XxxIcon style={{ height: "10px" }} />


http://www.kler.cn/a/387591.html

相关文章:

  • Web开发中页面出现乱码的解决(Java Web学习笔记:需在编译时用 -encoding utf-8)
  • 计算机网络 笔记 网络层1
  • 【数据结构】二叉搜索树
  • HTML5 网站模板
  • 在php中,Fiber、Swoole、Swow这3个协程都是如何并行运行的?
  • 极大似然估计笔记
  • 数据分析驱动的市场预测:民锋量化技术的创新探索
  • Visio使用教程
  • Kafka 可观测性最佳实践
  • wps怎么算出一行1和0两种数值中连续数值1的个数,出现0后不再计算?
  • 企业IT架构转型之道:阿里巴巴中台战略思想与架构实战感想
  • 【提效工具开发】Python功能模块执行和 SQL 执行 需求整理
  • python可视化将多张图整合到一起(画布)
  • 三次权重函数
  • web——sqliabs靶场——第二关
  • 基于SpringCloud+Vue的社区服务系统 (含源码数据库)
  • 【AI】【提高认知】卷积神经网络:深度学习与计算机视觉的核心驱动力
  • HTTP 和 HTTPS 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】
  • Linux内核.之 init文件,/init/main.c
  • Kylin Server V10 下自动安装并配置Kafka
  • 在docker里创建 bridge 网络联通不同容器
  • 旧衣回收小程序:提高回收效率,扩大服务范围
  • 【SpringBoot】使用注解进行XSS防御
  • 股民情绪识别的LSTM-NBM混合模型
  • Java 泛型详解:参数化类型的强大之处
  • 数字乡村建设方案-5