Для разработчиков
Логотипы брендов прямо в проекте
Найдите бренд в редакторе или терминале. Вставьте ссылку, разметку или скачайте SVG и PNG — без поиска по сайтам.
npx trace-logos search telegram
01 / npm
Из терминала — в assets
CLI для разовой задачи и библиотека для ваших скриптов. Один пакет — trace‑logos.
- Поиск по русскому и английскому названию, даже в неверной раскладке.
- Скачивание SVG и PNG; вывод JSON для скриптов и пайпов.
- Актуальный каталог с кэшем. Node.js 18.17+, ESM, CommonJS и типы TypeScript.
npm i trace-logos
npx trace-logos search telegram1. Telegram (telegram) Мессенджеры и соцсети [svg png] 2. Walt (walt) Платежи и карты [svg] 3. Т-Бизнес Секреты (tbusinesssecrets) Музыка и медиа [svg png]
Скачать SVG или получить JSON
npx trace-logos get telegram --svg --out ./assets
npx trace-logos search telegram --jsonФлаги CLI и пример библиотеки
Slug уникален только внутри категории: alfa, google и monopoly встречаются в нескольких разделах. В таком случае CLI покажет кандидатов, а вы укажете категорию — bank/alfa.
--offline работает только с кэшем, --refresh перепроверяет каталог сразу. Существующий файл get не перезапишет без --force.
Библиотека
import { TraceLogos } from 'trace-logos';
const tl = new TraceLogos();
await tl.load();
const [logo] = tl.search('telegram', { limit: 1 });
console.log(logo.name, tl.pageUrl(logo));ESM и CommonJS, типы TypeScript в комплекте. Методы: load, search, assetsOf, fetchAsset, pageUrl.
02 / VS Code
Логотип, не выходя из редактора
Откройте Trace Logos: Search, найдите бренд и выберите, как добавить его в проект.
- Превью на светлом, тёмном и прозрачном фоне.
- Готовые
<img>, JSX, Markdown и CSSurl(). - SVG и PNG в папку проекта, варианты логотипа и переход на страницу бренда.
ext install trace-logos.trace-logos
Вставьте строку в Quick Open (Ctrl+P, на Mac — Cmd+P) или найдите Trace Logos в панели расширений.
<img src="https://trace-logos.ru/assets/logos/svgs/telegram.svg" alt="Telegram">
03 / JSON API
Весь каталог одним запросом
Статичный logos.json для вашего сайта, сервера или сборки. Без ключа и регистрации.
- CORS открыт: можно читать прямо из браузера.
- Прямые ссылки на SVG, PNG и страницу бренда.
- Названия, теги, категории, экосистемы и варианты логотипов.
https://trace-logos.ru/logos.json
{
"name": "Telegram",
"svgUrl": "https://trace-logos.ru/assets/logos/svgs/telegram.svg",
"url": "https://trace-logos.ru/logos/social/telegram/"
}Поиск на JavaScript
const res = await fetch(
'https://trace-logos.ru/logos.json'
);
const { logos } = await res.json();
const logo = logos.find(
({ name }) => name === 'Telegram'
);
console.log(logo.svgUrl, logo.url);У некоторых логотипов нет SVG: проверяйте svgUrl и pngUrl. Заглушки comingSoon: true отфильтруйте.
Лицензия и атрибуция
Код — MIT. Логотипы — товарные знаки владельцев: сверьтесь с брендбуком перед публикацией. Ссылку на каталог можно добавить готовой плашкой.
Частые вопросы
Нужен ли API‑ключ?
trace-logos, например, кэширует каталог на 10 минут и проверяет обновления по ETag.Как новые логотипы попадают в пакет и расширение?
Почему trace-logos get alfa завершается ошибкой?
alfa есть и у банка, и у страховой компании. CLI выведет оба варианта, а вы укажете нужный: bank/alfa или insurance/alfa.