Как лучше вставлять векторную иконку, если не касаться спрайтов, через content: url, или псевдоэлементу задавать размер, а иконку помещать как фон с полным заполнением размеров? (речь именно про иконку как псевдоэлемент, потому что нужно, чтобы менялась её прозрачность)
Если меняется прозрачность, то не стоит усложнять CSS-код. Достаточно добавить фоновое изображение с svg-файлом и размером для псевдоэлемента.
Как создать хороший и понятный svg спрайт? И есть ли вообще необходимость создавать такие спрайты?
Спрайты стоит использовать при оптимизации, когда нужно сократить количество http-запросов. SVG-спрайт по умолчанию удобный, ведь вам нужно обратится к иконки в спрайте по имени, а не как в растровых спрайтах к секции, которую ещё нужно посчитать.