离子图标周围的阴影/轮廓答案

【问题标题】：Shadow/outline around ion-icon离子图标周围的阴影/轮廓
【发布时间】：2021-03-16 11:36:24
【问题描述】：

我正在尝试在彩色图标周围设置实心边框。

应该足够直截了当，显然它适用于字形图标，但我无法让它适用于 <ion-icon>

我试过了……

<ion-icon [name]="'heart'" style="font-size: 25px; color: #d00; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;"></ion-icon>

// like this fiddle: http://jsfiddle.net/9suc171t/1/

或者……

<ion-icon [name]="'heart'" style="font-size: 25px; color: #d00; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);"></ion-icon>

我已经尝试了text-shadow 的其他格式，但除了红色图标之外我没有得到任何其他格式。

感觉有点卡住了，感谢任何帮助！

【问题讨论】：

相关：stackoverflow.com/a/32577668/1507899

标签： css ionic-framework ionic4

【解决方案1】：

看起来 ion-icon 正在使用 shadow DOM，以免干扰其他样式。你也许可以通过 JS 访问 shadow DOM 并直接编辑它：

document.querySelector('ion-icon').shadowRoot.childNodes[0].innerText+="path{stroke:black; stroke-width:10})"

这将选择图标，获取其 shadowRoot 的第一个子元素，即 <style> 标记，然后添加更多样式。

【讨论】：

【解决方案2】：

我可能为时已晚，但我放这个以防其他人正在寻找它。您可以使用与此答案类似的方法来更新影子根的样式表。

在我的例子中，我使用了

<ion-icon name="add-circle" #addButton></ion-icon>

@ViewChild('addButton', {static: true, read: ElementRef}) addButtonView: ElementRef;

constructor(...) {...}
...
ngAfterViewInit() {
    const cssRule = 'stroke: var(--ion-color-light) !important;' +
        'stroke-width: 1rem;' +
        'stroke-opacity: 1;';
    try {
      const sheet = new CSSStyleSheet();
      // To support Internet Explorer before version 9
      sheet.insertRule ? sheet.insertRule(`svg {${cssRule}}`) : sheet.addRule( `svg`, cssRule);
      this.addButtonView.nativeElement.shadowRoot.adoptedStyleSheets =
          this.addButtonView.nativeElement.shadowRoot.adoptedStyleSheets.concat([sheet]);
    } catch (e) {  // Cannot instanciate CSSStyleSheet in some browsers
      const style = document.createElement('style');
      style.innerHTML = `svg {${cssRule}}`;
      this.addButtonView.nativeElement.shadowRoot.appendChild(style);
    }
}

【讨论】：

【解决方案3】：

CSS filter 属性在现代浏览器中非常有效，无需 JS。见：https://stackoverflow.com/a/13624469/5063469

【讨论】：