如何将SVG Sprite包含到组件中？

Question

我的普通html看起来像：

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

svg路径：＆＃39;＆＃39; assets / img / sprite.svg＃icon-chat＆＃39;＆＃39;

Answer 1

• 首先，您需要在<object type="image/svg+xml" data="img/sprite.svg"> Your browser does not support SVG </object>页面中添加带有图标的精灵：

HTML

• 然后你可以在不同的地方使用这个精灵的图标 viewBox。图标的大小可以更改或保留，就像使用 <svg class="user-nav__icon" viewBox="0 0 48 48"> <use xlink:href="img/sprite.svg#icon-chat"></use> </svg> <svg class="user-nav__icon" viewBox="0 0 24 24"> <use xlink:href="img/sprite.svg#icon-user"></use> </svg>
的帮助

{{1}}