应用程序启动后,在IONIC中增加SVG图像的大小

vltsax25  于 2023-06-04  发布在  Ionic
关注(0)|答案(1)|浏览(174)

我试图改变我的IONIC项目中的一个svg图像的大小(在将jpg转换为svg后自定义)。
因此,我在Angular.json中添加了所有指向bootstrap的引用

"styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              },
              {
                "input": "node_modules/bootstrap/dist/css/bootstrap.min.css"/HERE
              }
            ],

这样我就可以通过src以传统的方式将图像(svg)添加到我的离子图标标签中

<ion-icon class='big' src='../../../assets/home.svg' ></ion-icon>

然后,由于图像太小,我确实尝试使用几种方法来改变其大小,但这不起作用。
我在我的app.scss中使用了SCSS
我设置了这个

ion-icon {
    &.big {
      width: 350px;
      height: 350px;
    }
 }

然后我在我的html上添加了我之前公开的类

<ion-icon class='big' src='../../../assets/home.svg' ></ion-icon>

我可以使用size=large,但这将受到特定度量的限制,但svg图像不会修改其大小.....
任何帮助如何改善这个问题?
如果有任何其他方式使这发生也将是伟大的任何提示!谢谢
顺便说一下,我使用的IONIC版本是6.12.0

mwyxok5s

mwyxok5s1#

不要使用Bootstrap,它会与ionic的默认css冲突,你的UI可能会变得一团糟。
使用img标签来显示您的SVG。
<img src="assets/svgicons/youricon.svg" />
并应用CSS的宽度和高度。

相关问题