创建自定义图标集

This post is also available in: English 日本語 Français Español Deutsch Српски Polski Português Български

Vivaldi 引入了对所有工具栏按钮的自定义图标集的支持。 以下是在创建自己的图标时如何最好地处理资源。

编辑主题

您可以直接在 Vivaldi UI 中填充所有主题按钮。 要放置您自己的图标,请转到“设置>主题>编辑器>图标”,查看按类别排序的所有可用工具栏按钮的列表,以及用于放置您自己的图标的界面。 自定义图标将包含在导出的主题中。

Vivaldi 主题编辑器中的按钮编辑器部分
按钮图标编辑器


图像尺寸

Vivaldi 在所有工具栏中支持 28 × 28 像素位图或 SVG 图像。 较大的图像将缩放到此大小。

图标布局

Vivaldi 图标字形的大小约为 16 像素。 您的图标应该在其边缘留出边距,而不是填满整个画布,这可能会导致在狭窄的工具栏中出现大图标。 但是,您可以随意将可用空间用于跨越假想边界之外的形状或更大的图标。

建议的图标在画布上的位置
建议的图标在画布上的位置


位图资源

Vivaldi 支持 GIF、JPG、JPEG、PNG 和 WEBP 格式的位图图像。 请考虑使用支持 Alpha 通道掩码的格式。 图标应与浅色和深色背景色保持足够的对比度,因为您的主题图标集也可以在其他主题中使用。

位图资源最好以 目标大小的两倍 导出,以便在高 DPI 显示器上清晰呈现,并为 UI 缩放留出空间,即以 56 × 56 像素导出图像,使 28 像素目标的分辨率增加一倍。


SVG 资源

除了位图之外,Vivaldi 还支持可缩放矢量图形 (SVG) 格式,该格式可以通过几种不同的方式生成。

如果您希望图标继承当前主题颜色,请不要使用任何填充颜色定义,或使用 currentColor 关键词。 这确保了所有不同工具栏和主题组合中的正确颜色继承。

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="currentColor"
>
  <!-- inherits fill color from current Vivaldi theme -->
  <path d="..." />
  <!-- uses specific fill color -->
  <path d="..." fill="#ffeea8" />
</svg>

SVG 颜色继承示例

另一方面,您可以在本地控制所有描边和填充颜色,而与当前主题颜色无关。 在这种情况下,您需要确保设置了所有颜色,以免继承意外的主题颜色。

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="#000"
>
  <!-- inherits default fill color #000 specified above -->
  <path d="..." />
  <!-- uses specific fill color -->
  <path d="..." fill="#ffeea8" />
</svg>

具有自己的颜色定义的 SVG 代码示例

您是选择使用填充图标还是基于描边的图标取决于您。 在后一种情况下,以内联方式定义笔划属性。

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <!-- no fill; stroke color inherited from current Vivaldi theme -->
  <path
    d="..."
    stroke-width="1"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

基于笔划的 SVG 图标示例

SVG 滤镜和蒙版

SVG 中的滤镜和蒙版由 ID 引用,ID 必须是唯一的。 如果 ID 不唯一,则对它的引用可能会丢失,并且筛选器或掩码将中断。 在多个文件中维护同一筛选器的唯一 ID 非常繁琐,并且不会阻止文档对象模型 (DOM) 中的 ID 重复性。

为了克服潜在的问题,请考虑拼合图形而不是使用蒙版,或者将 SVG 过滤器替换为内联级联样式表 (CSS)。 例如,要替换 feDropShadow SVG 发光效果:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <defs>
    <filter id="neonGlow-034">
      <feDropShadow
        in="enlarged"
        dx="0"
        dy="0"
        stdDeviation="40"
        flood-color="cyan"
      />
    </filter>
  </defs>
  <g filter="url(#neonGlow-034)">
    <rect x="7" y="7" width="14" height="14" rx="2" />
  </g>
</svg>

原始 SVG 滤镜

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <g style="filter: drop-shadow(0, 0, 1px, cyan)">
    <rect x="7" y="7" width="14" height="14" rx="2" />
  </g>
</svg>

内联 CSS 实现的类似效果

最小化 SVG

使用 SVGO 等工具最小化导出的 SVG 图标是个好主意。 您的编辑器还可以在导出时最小化 SVG,但这可能会带来一些警告,例如维护唯一 ID。

SVG 文件编码

SVG 文件必须采用 UTF-8 编码。 导入 sanitation 会剥离所有 JavaScript 和 <style> 元素(允许内联样式属性)。


主题存档格式

当前的 Vivaldi 主题格式已扩展为支持越来越多的工具栏按钮或 命令链的图标。 单个图标资源在主题存档 JSON 中导出为按钮 ID 和图像路径对。

"buttons": {
  "buttonId": "imagefile01.png"
}

如果您正在批量处理图标图像,您可以考虑在 Vivaldi 中导出您的自定义主题,并通过在生成的 ZIP 存档中替换它们来更新图像。

Figma 模板

如果您想开始根据官方 Vivaldi UI 图标创建新的图标集,我们为此创建了一个 Figma 模板。 模板的 URL https://www.figma.com/community/file/1214878626987427743