CODEWITHSUNDEEP
htmlsvggulpiconssprite
Эльёр Садуллаев
Эльёр Садуллаев

Reputation: 1

My sprite.svg file showing only one/first element, project compiler is gulp

The icon-location icon is displayed correctly, but other icons such as icon-mail are not displayed. I have tried clearing the cache and reloading the page, but the problem persists.

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="display: none;">
  <symbol id="icon-location" viewBox="0 0 24 24">
    <path d="M12 12C12.55 12 13.0208 11.8042 13.4125 11.4125C13.8042 11.0208 14 10.55 14 10C14 9.45 13.8042 8.97917 13.4125 8.5875C13.0208 8.19583 12.55 8 12 8C11.45 8 10.9792 8.19583 10.5875 8.5875C10.1958 8.97917 10 9.45 10 10C10 10.55 10.1958 11.0208 10.5875 11.4125C10.9792 11.8042 11.45 12 12 12ZM12 19.35C14.0333 17.4833 15.5417 15.7875 16.525 14.2625C17.5083 12.7375 18 11.3833 18 10.2C18 8.38333 17.4208 6.89583 16.2625 5.7375C15.1042 4.57917 13.6833 4 12 4C10.3167 4 8.89583 4.57917 7.7375 5.7375C6.57917 6.89583 6 8.38333 6 10.2C6 11.3833 6.49167 12.7375 7.475 14.2625C8.45833 15.7875 9.96667 17.4833 12 19.35ZM12 22C9.31667 19.7167 7.3125 17.5958 5.9875 15.6375C4.6625 13.6792 4 11.8667 4 10.2C4 7.7 4.80417 5.70833 6.4125 4.225C8.02083 2.74167 9.88333 2 12 2C14.1167 2 15.9792 2.74167 17.5875 4.225C19.1958 5.70833 20 7.7 20 10.2C20 11.8667 19.3375 13.6792 18.0125 15.6375C16.6875 17.5958 14.6833 19.7167 12 22Z" fill="#65676B" />
  </symbol>
  <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-mail">
    <path d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z" fill="#65676B">
    </path>
  </symbol>
  <!-- Other Icons -->
</svg>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <object type="image/svg+xml" data="images/icons/sprite.svg" style="display: none;"></object>
  //= templates/partial/head.html
  <title>Document</title>
</head>
<body>
  //= templates/partial/header-2.html
  <main>
    Lorem, ipsum dolor.
    <svg class="icon">
      <use xlink:href="/images/icons/sprite.svg#icon-location"></use>
    </svg>
    <svg class="icon">
      <use xlink:href="/images/icons/sprite.svg#icon-mail"></use>
    </svg>
  </main>
</body>
</html>

Upvotes: 0

Views: 18

Answers (0)

Related Questions