3

Использую webpack-svgstore-plugin. Добился того что делаю спрайт. Как подключить один елемент с спрайта. Подключаю как в примере плагина но не работает

Весь пример тут

 <svg class="svg-icon">
    <use xlink:href="#iconarrow-big-right"></use>
 </svg>

1
  • Shperung точно не автор этого плагина, насколько мне известно ) 5 фев 2017 в 14:35

1 ответ 1

4
  1. Первая главная ошибка - вы верите в волшебную силу спрайтов. Типа надо просто накидать кучу SVG файликов в одну папку, установить вебпак и будет счастье - всё ОК, все иконки на странице. Но не получится ничего, как в вашем случае.

  2. Потому-что надо понимать, как всё это работает. Пойдите по другому пути, вставьте вручную в HTML страницу хоть немного иконок из спрайта, который сделаете вручную, сами.
    Иначе появится куча вопросов - почему не видно иконку, почему изображение обрезано, не того размера, почему нельзя стилизовать иконки.

  3. Я посмотрел вашу папку с файлами иконок и такое впечатление, что абсолютно не было подбора иконок, набросали всё подряд, что нашли.

  4. В идеальном случае у иконок должны быть одинаковые атрибуты viewBox, а у вас они колеблются от 16 до 425.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>test</title>
 </head> 
<body>
<div id="container">
<!--  начало спрайта -->
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	

<symbol id="child" viewBox="0 0 425 425">
	<path d="M119.3,173.5c29.6,0,53.6-24,53.6-53.7c0-18.5,6.5-35.4-7.8-45c-8.5-5.8-46.1-8.5-57.2-8.5c-13.2,0-30.4,10.8-39.7,18.7
		c-11.6,9.8-2.5,18.5-2.5,34.9C65.7,149.5,89.7,173.5,119.3,173.5z M120.5,161c-21.7,0-39.2-17.9-39.2-39.9c0-2.2,0.3-4.3,0.6-6.5
		c9.9-1.8,16.5,1.5,16.5,1.5l16.5-8c0,0-8.4,12.1-0.8,8c16.7-5.6,35.4-3.3,45-1.4c0.3,2.1,0.6,4.2,0.6,6.4
		C159.8,143.2,142.2,161,120.5,161z"/>
	<path d="M241.8,178.7c-3.2-28.6,10.5-45.9,15.8-51.4c4.9,29.6,30.4,52.3,61.4,52.3c29.3,0,53.9-20.4,60.5-47.8
		c5.1,8.9,13.6,27.2,11.5,46.8c52.1-0.4,26.4-59.9-10-66.4c-0.3-3.1-0.6-6.1-1.2-9c-2.1-18.8-19-57-67.2-55.9
		c-41.6,1-50.7,32.3-52.8,51.4c-1.5,4.7-2.4,9.6-2.7,14.7C202.8,122.9,208.7,177.8,241.8,178.7z M319,162.1
		c-24.4,0-44.1-19.6-44.7-43.8c8.9-3.2,15.4-18.6,15.4-18.6s5.3,1.8,5.3,19.2c9.2,3.2,25.2-27,25.2-27v23.8
		c10.2,2.8,42.2-0.9,42.2-0.9l1.2,1c0,0.5,0.2,1,0.2,1.6C363.7,141.9,343.7,162.1,319,162.1z"/>
	<polygon points="391,268.1 415.9,261.9 356.3,181.3 332,181.3 332,181.3 283.7,181.3 219.3,258.9 157,182.3 86.1,182.3 2.9,273.1 
		27.5,279.7 80.6,234.4 80.6,322.3 91.2,322.3 91.2,389.1 84.4,389.1 84.4,396.9 115.3,396.9 115.3,322.3 126.9,322.3 126.9,396.9 
		157.6,396.9 157.6,389.1 150.9,389.1 150.9,322.3 163.9,322.3 163.9,236 206.3,279.7 223.7,275.4 233.3,277.7 281.4,222.7 
		284.1,244.5 239.5,321.3 291,321.3 291,388.1 284.2,388.1 284.2,395.9 315,395.9 315,321.3 326.6,321.3 326.6,395.9 357.4,395.9 
		357.4,388.1 350.6,388.1 350.6,321.3 390.6,321.3 351.2,244.5 353.4,217.7 	"/>
</symbol>
   <symbol id="basket" viewBox="0 0 425 425">
	 <path d="M423.8,183.1c0,0,0-0.1,0-0.1c0-0.5,0-0.9-0.1-1.4c0-0.3-0.1-0.5-0.1-0.8c0-0.3-0.1-0.5-0.1-0.8c-1.4-8.6-8.8-15.3-17.8-16
		H21.2c-10.9,0-19.8,8.6-19.8,19.2s8.9,19.2,19.8,19.2h17.5L81.2,367l0.1,0c2.1,8.3,9.9,14.6,19.1,14.6l0,0c0,0,0.1,0,0.1,0v0h224.3
		c9.3,0,17-6.2,19.1-14.6l0.1,0l42.4-164.6H404C414.9,202.4,423.8,193.8,423.8,183.1C423.8,183.2,423.8,183.2,423.8,183.1
		C423.8,183.1,423.8,183.1,423.8,183.1z M153.2,324c0,10.6-8.9,19.2-19.8,19.2s-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		s19.8,8.6,19.8,19.2V324z M232.4,324c0,10.6-8.9,19.2-19.8,19.2c-10.9,0-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		c10.9,0,19.8,8.6,19.8,19.2V324z M311.6,324c0,10.6-8.9,19.2-19.8,19.2c-10.9,0-19.8-8.6-19.8-19.2V221.6c0-10.6,8.9-19.2,19.8-19.2
		c10.9,0,19.8,8.6,19.8,19.2V324z M234.9,64.6l43.8,80.2h44.8l-53.6-98.2l-0.1,0C266.6,40.4,260,36,252.2,36
		c-10.9,0-19.8,8.6-19.8,19.2C232.4,58.6,233.4,61.8,234.9,64.6L234.9,64.6z M190.3,64.6l-0.1-0.1c1.6-2.8,2.6-5.9,2.6-9.3
		c0-10.6-8.9-19.2-19.8-19.2c-7.8,0-14.4,4.4-17.6,10.7l0,0l-53.6,98.2h44.8L190.3,64.6z"/>
   </symbol>
       <symbol id="clock" viewBox="0 0 425 425">
         <path d="M69.605,70.754c-78.789,78.199-78.789,204.997,0,283.17c78.785,78.171,206.532,78.203,285.292,0
	c78.787-78.205,78.787-204.997,0-283.17C276.109-7.448,148.363-7.448,69.605,70.754z M319.42,224.851H211.886
	c-0.191,0-0.352,0.106-0.541,0.106c-7.456,0-13.508-6.005-13.508-13.41V77.352c0-7.401,6.053-13.41,13.508-13.41
	c7.458,0,13.51,6.009,13.51,13.41v120.681h94.565c7.458,0,13.51,6.005,13.51,13.406C332.93,218.842,326.878,224.851,319.42,224.851z
	"/>
	  </symbol>
	   </svg>
	   <!--  конец спрайта -->
 </div>  

	 <div id="s1">
	    <svg> 
	      <use xlink:href="#basket"></use>
    	</svg>
	</div>
       <div id="s2">
	  		<svg> 
		     <use xlink:href="#child"></use>
		    </svg>
       </div>
	     <div id="s3">
	  		<svg> 
		     <use xlink:href="#clock"></use>
		    </svg>
         </div>
     </body>
  </html>

Формировать спрайт можно несколькими путями: либо разместить в библиотечной секции <defs> ---- </defs> а каждую иконку обернуть тегом группы <g id="child"> ....</g> Либо вторым способом - помещая код иконки в парные теги <symbol id="child"> как в примере выше.

Делается это прежде всего для того, чтобы иконки лежали в одном большом файле и не были видны пока их не вызовут командой <use> Загружать спрайт в HTML можно разными способами. Подробнее здесь. И еще один прием, чтобы не гадать почему такие большие отступы текста от иконки, посмотрите заранее, как расположено изображение относительно viewport внутри SVG файла. Для этого временно в шапку файла можно добавить рамку style="1px solid red;" после того, как отрегулируете расположение изображения относительно viewport, рамку можно убрать. Как позиционировать иконку внутри файла SVG - здесь

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.