Vue.component('PageHeader',{
template: '.header'
});
import Header from './components/header.vue'
Vue.component('PageHeader',{
template: '<Header />',
components: { Header }
});
display: subgrid
, но на данный момент он не реализован ни в одном браузере, еще есть display: contents
, который действут слегка по-другому, но позволяет добится схожего поведения, правда работает он исключительно в последних версиях firefox'a.display:grid
и сделать внутри отдельную раскладку, но это не так интересно, как наследовать раскладку прародителя.
Дело в том, что при таком спрайте вы никак не получите доступ к внутренним path чтобы обработать их при ховере, поскольку для внешнего тэга SVG их не существует. Нужно либо вставлять svg инлайново, либо обрабатывать hover в js (помня при этом, что изменение самого спрайта изменят его во всех местах, где он используется).