icon request：gear

[Awin-G]

Awesome icons, relying solely on CSS to implement, which is simply cool.

icon request：gear

Expect to have an icon for "settings", like a gear? I modified a rough shape based on Shape Hexagon, although I used it a little differently, hope it helps.

// 直接指定gss缩放的版本  Specify the version of the GSS scaling directly
i[style*="--ggs"] {
  // 计算容器尺寸：图标高宽 * 比例 + (两个边框2px+2px + 冗余避免完全紧贴1px) * 比例
  // Calculate the container size: icon height and width * scale + (two borders 2px + 2px + redundancy to avoid being completely tight 1px) * scale
  width: calc(var(--width) * var(--ggs, 1) * 1px + 5px * var(--ggs, 1));
  height: calc(var(--height) * var(--ggs, 1) * 1px + 5px * var(--ggs, 1));
  :only-child {
    left: calc(5px * var(--ggs, 1) / 2);
    transform-origin: left;
  }
}

// 统一尺寸版本 Uniform size version
i[style*="--uniform"] {
  --ggs: calc(var(--uniform) * 1px / max(var(--width), var(--height)) * 1px / 1px);
  height: calc(var(--uniform) * 1px);
  width: calc(var(--uniform) * 1px);
  :only-child {
    --ggs: calc(var(--uniform) / max(var(--width), var(--height)));
    left: calc(max(0, (var(--uniform) - var(--width) * var(--ggs)) / 2) * 1px);
    transform-origin: left;
  }
}
i {
  // 齿轮
  &:has(> gear) {
    --height: 22;
    --width: 22;
  }
  gear,
  gear::after,
  gear::before {
    display: block;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    // 居中图标（在我的使用环境中必要）Centering icon (necessary in my environment)
    // margin-left: calc(var(--ggs,1)*7px);
    // border-left: 4.5px solid currentColor;
    // border-right: 4.5px solid currentColor;
    border-radius: 14px;
    outline: 4px solid currentColor;
    box-shadow: 
      -8px 0 0 -1px currentColor,
      8px 0 0 -1px currentColor;
  }
  gear {
    position: relative;
    transform: scale(var(--ggs, 1));
  }
  gear::after,
  gear::before {
    content: "";
    position: absolute;
    // 居中图标（在我的使用环境中必要）Centering icon (necessary in my environment)
    // left: calc( 0px - var(--ggs,1)*7px);
  }
   gear::before {
    transform: rotate(60deg);
  }
   gear::after {
    transform: rotate(-60deg);
  }
}

It looks like this