如何在带有ruby on rails的伪元素中显示来自svg sprite的图标

Posted 2023-02-15

【中文标题】如何在带有ruby on rails的伪元素中显示来自svg sprite的图标

【英文标题】：How to display icon from svg sprite in pseudo element with ruby on rails

【发布时间】：2021-10-16 16:52:28

【问题描述】：

我想创建一个类似Home > 的菜单，其中右箭头是 svg sprite 中的图标。我想将> 作为一个伪元素放在css 选择器中，这样我就可以通过添加css 选择器.menu-arrow 使任何菜单都有右箭头。我正在尝试在 ruby​​ on rails 6 中执行此操作，但没有成功。

我尝试将 svg 图标精灵添加为背景内容，但它似乎无法正常工作。

我的 svg 精灵

path to svg sprite: app/assets/images/sprites.svg


<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-check-solid" viewBox="0 0 32 32">
<path d="M10.869 27.463l-10.4-10.4c-0.625-0.625-0.625-1.638 0-2.263l2.263-2.263c0.625-0.625 1.638-0.625 2.263 0l7.006 7.006 15.006-15.006c0.625-0.625 1.638-0.625 2.263 0l2.263 2.263c0.625 0.625 0.625 1.638 0 2.263l-18.4 18.4c-0.625 0.625-1.638 0.625-2.263-0z"></path>
</symbol>
<symbol id="icon-chevron-down-solid" viewBox="0 0 28 32">
<path d="M12.939 23.842l-12.146-12.146c-0.586-0.586-0.586-1.536 0-2.121l1.417-1.417c0.585-0.585 1.533-0.586 2.119-0.002l9.672 9.626 9.672-9.626c0.586-0.583 1.534-0.582 2.119 0.002l1.417 1.417c0.586 0.586 0.586 1.536 0 2.121l-12.146 12.146c-0.586 0.586-1.536 0.586-2.121 0z"></path>
</symbol>
</defs>
</svg>`

我的 CSS 类

.menu-arrow 
      &::after 
        content: '';
        display: inline-block;
        height: 2rem;
        width: 2rem;
        background-image: asset-url("images/sprites.svg#icon-chevron-down-solid");
        transform: rotate(90deg) scale(1.5);
        fill: var(--color-white);
        color: var(--color-white);
        font-weight: 700;
        border: 1px solid red;
      
    

我该如何进行这项工作？

【参考方案1】：

这个article 表明CSS url 中的#id 引用view 而不是symbol

您当然可以通过 use 将您的 sprite 用作内联 SVG（阴影）DOM 元素，并帮助简化流程 (see this)

特别是对于您的 V 形，您可以使用没有背景的伪元素（两侧的边框带有圆角并旋转 45 度）来实现几乎相同的图形元素。我做了一支笔here 来演示这种方法