如何摆脱图标的边框？答案

【问题标题】：how to get rid of the border for icons?如何摆脱图标的边框？
【发布时间】：2021-08-17 21:04:22
【问题描述】：

我的目标是让图标发光，但如果应用阴影，它会带有一个丑陋的圆形 div。

反应代码：

<SunIcon
  className="h-10 w-10 rounded-3xl mr-2.5 text-suncolor shadow-sunshadow"
     />

日影是0 0 20px 7px rgb(255 204 51 / 66%)

我得到的输出：我得到那个轮廓

我也尝试过使用无大纲，但不起作用

【问题讨论】：

你用的是哪个图标库？
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

【解决方案1】：

我猜测您使用的图标库正在渲染 SVG 元素。在 SVG 上使用 box-shadow 会产生您发布的图像中的效果。

SVG 可以显示阴影，您可以阅读有关 here 的信息，但是在使用预先存在的库时，修改它们可能会很困难。

对于 CSS 驱动的阴影，您可以在 filter 中使用 drop-shadow，但我一直觉得效果太淡了：

filter: drop-shadow( 0 0 5px rgba(255, 204, 51, .66));

【讨论】：

【解决方案2】：

元素始终是正方形和矩形（或带有半径，甚至是圆形），但绝不是自定义形状

用::before 伪元素试试

.iconClassName::before, .iconClassName::before:hover, .iconClassName::before:active { content:"";  box-shadow: 0 0 20px 7px rgb(255 204 51 / 66%)}

也许您必须编辑宽度/高度、位置...

尝试删除您的 Border-Radius，但没有最少的示例代码很难尝试

【讨论】：