Лучший способ включения большого количества значков на веб-сайт?

Question

Я работаю над несколькими веб-приложениями, которые принадлежат одному и тому же сайту. Поскольку здесь есть несколько проектов, у меня есть большое количество иконок, которые необходимы, каждый из которых доступен в 12 разных цветах. (Причина появления большого количества значков - это очень специфические действия, требующие определенного пользовательского значка). Общее количество значков, с которыми я работаю, легко достигает более 400 значков, если вы включаете все цветовые вариации.

Я использовал изображение спрайта css, чтобы включить все эти значки, но в этот момент, когда мне приходится добавлять больше значков, CSS, связанный с созданием этих значков из спрайта, становится смехотворно длинным, а изображение спрайта становятся намного большими.

Есть ли лучший способ включить эти значки в сайт? Я изучил шрифт значка (все они простые одноцветные значки, так что это было бы хорошо), но не уверен, как легко это обновить. Я также думал о том, чтобы просто создавать отдельные файлы для значков, а также просто включать его в качестве изображения. И тогда есть также маршрут SVG.

Основываясь на том, сколько значков мне нужно, и что добавлено больше значков, какие вы считаете лучшим маршрутом для включения значков?

В лучшем случае может быть до 10 различных значков на странице, но, к сожалению, я не могу гарантировать, что это будет 10 конкретных значков. (как в, нет конкретных типов значков, которые я могу объединить вместе).

Спасибо!

Answer 1

Просто чтобы дать вам несколько вариантов, попробуйте иметь взгляд на IcoMoon

это веб-приложение, которое работает в Chrome и позволяет импортировать собственный SVG для создания пользовательских иконок шрифта. Для этого требуется , но я бы сказал не намного больше, чем создание листа спрайтов. Тогда у вас есть гибкость, которая дает вам шрифт значка; независимость от резолюции, легкие поправки к цветам и т. д.

@ Предложение Bojangles Stitches выглядит интересным; У меня будет возиться с этим днем! Если вы находитесь на Mac, есть SpriteRight, что обеспечивает аналогичную функциональность, если вы предпочитаете, чтобы ваши приложения были родными.