个人中心
gpt4 book ai didi

html - Shopify 的 SVG Sprite 解决方法

转载 作者：太空宇宙 更新时间：2023-11-04 01:18:29 25 4
gpt4 key购买 nike

我使用 SVG Sprite 已经有一段时间了，它们真的很有用。我刚刚将一些 HTML 模板交给了一位后端开发人员，他告诉我他们无法在 Shopify 中使用，因为它们来自 CDN/外部来源。

我通常(使用 SVG Sprite )这样调用图像:

<svg class="icon icon--phone"><use xlink:href="img/sprite/sprite.svg#icon-phone"></use></svg>

但现在我担心我需要将我所有的 SVG 分解成单独的文件，这样它们就不那么灵活了。因此，如果我需要像这样加载图像，我将无法调整 fill 和控制 :hover 样式(填充):

<img src="img/interface/icon-phone.svg" class="icon icon--phone" />

有人对此有好的解决方法吗？

最佳答案

您可以将 SVG Sprite 放入 HTML 中，然后正常使用您的 Sprite 。例如:

html {
  font-family: sans-serif;
  font-size: 16px;
}

svg {
    display: inline-block;
    fill: currentColor!important;
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
}

.button {

    display: inline-block;
    padding: .2rem .4rem 0;
    color: grey;
    position: relative;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: .8rem;
    text-decoration: none;
    transition: color .3s, background .3s;

    &.button--danger {
        color: red;
    }

    &:hover {
        text-decoration: none;
        background: #efefef;
        color: black;
    }

    svg {
        position: relative;
        top: -1px;
        margin-right: .1rem;
    }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  
</head>
<body>
  

<a href="#" class="button">
  <svg><use xlink:href="#svg-sync"></use></svg> Default
</a>

<a href="#" class="button button--danger">
  <svg><use xlink:href="#svg-sync"></use></svg> Modifier
</a>
  
  <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 64 64" id="svg-bin"><g enable-background="new"><path d="M53 9H38V6c0-1.657-1.343-3-3-3h-6c-1.657 0-3 1.343-3 3v3H11c-1.657 0-3 1.343-3 3v3h48v-3c0-1.657-1.343-3-3-3zM11 58c0 1.657 1.343 3 3 3h36c1.657 0 3-1.343 3-3V18H11v40zm30-31c0-1.657 1.343-3 3-3s3 1.343 3 3v25c0 1.657-1.343 3-3 3s-3-1.343-3-3V27zm-12 0c0-1.657 1.343-3 3-3s3 1.343 3 3v25c0 1.657-1.343 3-3 3s-3-1.343-3-3V27zm-12 0c0-1.657 1.343-3 3-3s3 1.343 3 3v25c0 1.657-1.343 3-3 3s-3-1.343-3-3V27z"/></g></symbol><symbol viewBox="0 0 64 64" id="svg-block"><g enable-background="new"><path d="M32 0C14.327 0 0 14.327 0 32s14.327 32 32 32 32-14.327 32-32S49.673 0 32 0zm0 58C17.64 58 6 46.36 6 32c0-6.098 2.115-11.694 5.63-16.128L48.128 52.37C43.693 55.886 38.098 58 32 58zm20.37-9.872L15.873 11.63C20.307 8.115 25.903 6 32 6c14.36 0 26 11.64 26 26 0 6.098-2.113 11.693-5.63 16.128z"/></g></symbol><symbol viewBox="0 0 64 64" id="svg-book"><g enable-background="new"><path d="M10.76 32.73l11 5c.377.172.797.27 1.24.27 1.657 0 3-1.343 3-3 0-1.214-.72-2.26-1.76-2.73l-11-5c-.377-.173-.797-.27-1.24-.27-1.657 0-3 1.343-3 3 0 1.214.72 2.26 1.76 2.73zm0 11l11 5c.377.172.797.27 1.24.27 1.657 0 3-1.343 3-3 0-1.214-.72-2.26-1.76-2.73l-11-5c-.377-.172-.797-.27-1.24-.27-1.657 0-3 1.343-3 3 0 1.214.72 2.26 1.76 2.73zm0-22l11 5c.377.173.797.27 1.24.27 1.657 0 3-1.343 3-3 0-1.214-.72-2.26-1.76-2.73l-11-5c-.377-.173-.797-.27-1.24-.27-1.657 0-3 1.343-3 3 0 1.214.72 2.26 1.76 2.73zM41 49c.443 0 .863-.098 1.24-.27l11-5C54.28 43.26 55 42.214 55 41c0-1.657-1.343-3-3-3-.443 0-.863.098-1.24.27l-11 5C38.72 43.74 38 44.786 38 46c0 1.657 1.343 3 3 3zM61 0c-.406 0-.794.082-1.146.228l-.006.002-.027.01L32 11.754 4.18.24C4.17.238 4.16.235 4.15.23L4.147.228C3.794.082 3.407 0 3 0 1.343 0 0 1.343 0 3v46c0 1.257.774 2.333 1.87 2.78l28.943 11.976c.364.157.765.244 1.187.244s.823-.087 1.188-.245l28.94-11.976C63.23 51.332 64 50.256 64 49V3c0-1.657-1.343-3-3-3zM29 56.512L6 46.995V7.488l23 9.517v39.507zm29-9.517l-23 9.517V17.005l23-9.517v39.507zM41 38c.443 0 .863-.098 1.24-.27l11-5C54.28 32.26 55 31.214 55 30c0-1.657-1.343-3-3-3-.443 0-.863.097-1.24.27l-11 5C38.72 32.74 38 33.785 38 35c0 1.657 1.343 3 3 3zm0-11c.443 0 .863-.097 1.24-.27l11-5C54.28 21.26 55 20.215 55 19c0-1.657-1.343-3-3-3-.443 0-.863.097-1.24.27l-11 5C38.72 21.74 38 22.785 38 24c0 1.657 1.343 3 3 3z"/></g></symbol><symbol viewBox="0 0 733.886 1024" id="svg-bug"><path d="M243.62 156.53C190.748 213.313 205.34 304 205.34 304s53.968 64 160 64c106.03 0 160.03-64 160.03-64s14.376-89.47-37.374-146.312c32.375-18.03 51.438-44.094 43.562-61.812-8.938-19.97-48.375-21.75-88.25-3.97-14.812 6.595-27.438 14.97-37.25 23.876-12.438-2.25-25.625-3.78-40.72-3.78-14.06 0-26.56 1.343-38.344 3.25-9.656-8.75-22.062-16.876-36.53-23.345-39.876-17.72-79.376-15.938-88.25 3.97-7.75 17.342 10.283 42.685 41.407 60.654zm401.126 413.22c-8.25-1.75-16.125-2.75-23.75-3.5 0-2.125.375-4.125.375-6.312 0-33.594-4.75-65.654-12.437-96.125 16.438 1.406 37.375-2.375 58.562-11.78 39.875-17.78 65-48.374 56.125-68.218-8.875-19.97-48.375-21.75-88.25-3.97-18.625 8.313-33.812 19.47-44 30.907-7.75-18.25-16.5-35.78-26.812-51.72-30.188 25.157-87.312 62.72-167.062 71.063v321.78s-.25 32-32.03 32c-31.75 0-32-32-32-32V430.22c-79.812-8.345-136.97-45.97-167.094-71.063-9.875 15.312-18.375 32-25.938 49.344-10.28-10.624-24.625-20.843-41.97-28.593-39.874-17.72-79.374-15.938-88.25 3.97-8.905 19.905 16.25 50.437 56.126 68.218 19.844 8.846 39.53 12.812 55.47 12.096-7.657 30.405-12.47 62.345-12.47 95.813 0 2.188.375 4.25.438 6.5-6.72.75-13.688 1.75-20.78 3.25-51.97 10.75-91.782 37.625-88.845 59.812 2.938 22.312 47.5 31.5 99.594 20.688 6.78-1.375 13.438-3.125 19.78-5.062 9.157 40.81 23.813 78.685 44.095 111.31-12.03 6.062-24.53 15-36.03 26.625C95.714 815 82.778 853.75 98.714 869.688c15.938 15.937 54.656 3 86.53-28.812 9.345-9.375 16.845-19.25 22.657-29C251.434 854.5 305.965 880 365.465 880c60.343 0 115.78-26.25 159.53-69.938 5.876 10.312 13.75 20.812 23.626 30.688 31.813 31.875 70.626 44.812 86.563 28.875s3-54.625-28.875-86.5c-12.312-12.375-25.688-21.75-38.438-27.938 20.125-32.5 34.625-70.375 43.688-111.062 7.188 2.25 14.688 4.375 22.562 6.062 52.06 10.812 96.625 1.562 99.625-20.688 2.813-22.125-37-49-89-59.75z"/></symbol><symbol viewBox="0 0 56.693 56.693" id="svg-sync"><g><path d="M34.693 18.318v4.43c0 .383.215.733.556.907.145.074.304.11.462.11.21 0 .42-.065.598-.194l9.37-6.804c.264-.19.42-.498.42-.824s-.156-.633-.42-.824l-9.37-6.805c-.31-.226-.72-.258-1.06-.085-.342.175-.557.524-.557.907v4.43H14.07c-5.802 0-10.52 4.72-10.52 10.522v7.928c0 1.312 1.063 2.377 2.375 2.377S8.3 33.328 8.3 32.015v-7.928c0-3.18 2.59-5.77 5.77-5.77h20.623zM50.512 21.71c-1.312 0-2.375 1.065-2.375 2.376v7.928c0 3.184-2.588 5.77-5.77 5.77h-20.72v-4.433c0-.38-.217-.73-.557-.905-.34-.172-.752-.143-1.06.084l-9.37 6.804c-.265.19-.42.498-.42.824s.155.633.42.824l9.37 6.807c.177.128.386.192.597.192.158 0 .316-.037.463-.11.34-.173.556-.524.556-.907v-4.43h20.722c5.8 0 10.52-4.72 10.52-10.52v-7.93c0-1.31-1.064-2.374-2.376-2.374z"/></g></symbol></svg>
  
</body>
</html>

关于html - Shopify 的 SVG Sprite 解决方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49639879/

25 4 0
文章推荐： python - 以字典为内容的嵌套列表
文章推荐： 在 C 中调用不带括号的函数如何工作？
文章推荐： 使用 memcpy 连接两个字符串
文章推荐： python - 在 Networkx MultiDigraph 的嵌套列表中加入节点
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com