如何在前端项目中简单优雅的使用 svg 图标并且适应排版?

universe_king

发布于
2024-01-23 浙江

更新于
2024-01-23

如何在前端项目中简单优雅的使用 svg 图标并且适应排版?

我 clone 了一个项目改改改 https://github.com/zauberzeug/nicegui

图片.png

原版项目右上角是一个 github 的图标：https://github.com/zauberzeug/nicegui/blob/main/website/static/github.svg

因为我的项目是 gitlab 的，所以我想把 github.svg 改成 gitlab.svg

所以我去 aliyun 的 icon 站点找了一个 gitlab 图标：https://www.iconfont.cn/search/index?searchType=icon&q=gitlab%20 并且复制了它的 svg 代码

图片.png

<svg t="1706022839926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4231" width="200" height="200"><path d="M932.317184 567.76704L885.10464 422.46144l-93.57312-287.997952c-4.8128-14.81728-25.776128-14.81728-30.590976 0L667.36128 422.459392H356.62848L263.051264 134.46144c-4.8128-14.81728-25.776128-14.81728-30.593024 0l-93.57312 287.997952-47.210496 145.309696a32.165888 32.165888 0 0 0 11.68384 35.96288l408.6272 296.890368L920.61696 603.734016c11.272192-8.192 15.990784-22.71232 11.68384-35.964928" fill="#FC6D26" p-id="4232"></path><path d="M512.002048 900.62848l155.365376-478.171136H356.634624z" fill="#E24329" p-id="4233"></path><path d="M512.004096 900.62848L356.63872 422.47168H138.901504z" fill="#FC6D26" p-id="4234"></path><path d="M138.891264 422.465536l-47.214592 145.309696a32.16384 32.16384 0 0 0 11.685888 35.96288L511.991808 900.62848z" fill="#FCA326" p-id="4235"></path><path d="M138.893312 422.459392h217.737216L263.053312 134.46144c-4.8128-14.819328-25.778176-14.819328-30.590976 0z" fill="#E24329" p-id="4236"></path><path d="M512.002048 900.62848l155.365376-478.154752H885.10464z" fill="#FC6D26" p-id="4237"></path><path d="M885.11488 422.465536l47.214592 145.309696a32.16384 32.16384 0 0 1-11.685888 35.96288L512.014336 900.62848z" fill="#FCA326" p-id="4238"></path><path d="M885.096448 422.459392H667.36128l93.577216-287.997952c4.814848-14.819328 25.778176-14.819328 30.590976 0z" fill="#E24329" p-id="4239"></path></svg>

然后复制到我的项目中使用，但是这个 svg 图标变得非常的大！！！

图片.png

我只想简单优雅的使用，最好可以无脑自适应，要怎么做呢？

前端 vue.js svg

阅读 2k

AI BotBETA

SVG 图标在前端项目中自适应排版的关键在于利用其原始尺寸和 CSS 的特性。在大多数情况下，将 SVG 作为背景图像或内联元素时，都需要通过特定的 CSS 规则来确保其自适应。

以下是实现 SVG 图标自适应排版的一种常见方法：

设置图标大小：
你需要明确设置 SVG 的尺寸，可以通过 CSS 来完成。width 和 height 属性决定了图标的大小。如果图标的大小没有设置，它可能会变得非常大或非常小。
```
.gitlab-icon {
    width: 1em;  /* 或其他适当的值 */
    height: 1em; /* 或其他适当的值 */
}
```
使用视图单位：
使用相对单位如 em 或 rem 可以使图标大小相对于其父元素或根元素变化，从而实现自适应排版。你也可以使用 vw 或 vh 单位，它们分别表示视口宽度和视口高度的百分比。
内联 SVG：
将 SVG 直接嵌入 HTML 文档中，而不是作为外部图像资源。这样可以方便地通过 CSS 控制其样式，包括尺寸、颜色等。
使用 object-fit 属性：
如果你将 SVG 作为背景图像或内联元素，可以使用 object-fit 属性来控制如何适应其容器的大小。例如，你可以设置 object-fit: contain; 以保持图标的原始纵横比并完全适应其容器，无论容器的尺寸如何变化。
SVG Viewbox 和 preserveAspectRatio：
通过设置 SVG 的 viewBox 属性并使用 preserveAspectRatio 来控制图标的缩放和对齐方式。这样可以在保持图标原始比例的同时适应不同的大小和容器。
调整颜色和填充：
如果你需要调整图标颜色，可以通过 CSS 的 fill 属性来实现。如果图标是一个路径，你可能需要设置 fill 属性为颜色值；如果图标是形状，可能需要设置形状元素的 fill 属性。同样地，可以调整 stroke 属性来改变边框颜色。
使用图标字体：
另一种方法是使用图标字体，如 Font Awesome、Material Icons 等。这些字体允许你通过简单的字符引用（如 <i class="fas fa-gitlab"></i>）来使用图标，并利用字体属性来实现自适应排版。这种方法相对简单且易于集成。

示例 CSS 设置：

.gitlab-icon {
   width: 1em;
   height: 1em;
   fill: currentColor; /* 设置颜色 */
}

示例 HTML 使用：

<svg class="gitlab-icon" viewBox="0 0 1024 1024"> <!-- viewBox 根据图标实际尺寸设置 -->
   <!-- 使用路径定义图标 -->
   <path d="..." />
</svg>

4 个回答

陟上晴明

发布于
2024-01-24 浙江

不考虑一下 iconify 吗?

wangshantao

发布于
2024-01-24 海南

阿里云导出是可以指定大小的，把200改成24就可以了

发布于
2024-01-24 浙江

直接设置大小就好了。比较常用的方法一般是给这个 svg 设置一个 width: 1em; height: 1em; 然后结合 font-size 去改变大小。

前端搬运工

发布于
2024-01-24 陕西

看下旁边其他几个icon图标有没有使用类什么的，代码中有没有设置样式，给.icon-font{font-size:24px}之类的，或者下载的时候选择下大小

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题