integration-logos

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Integration Logos

集成工具Logo

Get logos and icons for all Pica-supported integrations.

获取所有Pica支持的集成工具的Logo和图标。

Overview

概述

Pica provides logos and images for all 200+ supported integrations. Use this skill to display integration icons in your UI, documentation, or marketing materials.

Pica为所有200+支持的集成工具提供Logo和图片资源。您可以使用此功能在UI界面、文档或营销物料中展示集成工具图标。

Prerequisites

前提条件

Pica API key from https://app.picaos.com/settings/api-keys

从https://app.picaos.com/settings/api-keys获取Pica API密钥

Quick Reference

快速参考

Asset URL Pattern

资源URL格式

All integration assets follow this pattern:

https://assets.picaos.com/logos/{platform}.svg

Examples:

Gmail:

https://assets.picaos.com/logos/gmail.svg

Slack:

https://assets.picaos.com/logos/slack.svg

HubSpot:

https://assets.picaos.com/logos/hubspot.svg

所有集成工具资源均遵循以下格式：

https://assets.picaos.com/logos/{platform}.svg

示例：

Gmail:

https://assets.picaos.com/logos/gmail.svg

Slack:

https://assets.picaos.com/logos/slack.svg

HubSpot:

https://assets.picaos.com/logos/hubspot.svg

Common Platform IDs

常用平台ID

Integration	Platform ID	Asset URL
Gmail	`gmail`	`https://assets.picaos.com/logos/gmail.svg`
Google Calendar	`google-calendar`	`https://assets.picaos.com/logos/google-calendar.svg`
Slack	`slack`	`https://assets.picaos.com/logos/slack.svg`
HubSpot	`hubspot`	`https://assets.picaos.com/logos/hubspot.svg`
Salesforce	`salesforce`	`https://assets.picaos.com/logos/salesforce.svg`
Notion	`notion`	`https://assets.picaos.com/logos/notion.svg`
Linear	`linear`	`https://assets.picaos.com/logos/linear.svg`
GitHub	`github`	`https://assets.picaos.com/logos/github.svg`
Jira	`jira`	`https://assets.picaos.com/logos/jira.svg`
Asana	`asana`	`https://assets.picaos.com/logos/asana.svg`
Stripe	`stripe`	`https://assets.picaos.com/logos/stripe.svg`
Shopify	`shopify`	`https://assets.picaos.com/logos/shopify.svg`
Zendesk	`zendesk`	`https://assets.picaos.com/logos/zendesk.svg`
Intercom	`intercom`	`https://assets.picaos.com/logos/intercom.svg`
Airtable	`airtable`	`https://assets.picaos.com/logos/airtable.svg`

集成工具	平台ID	资源URL
Gmail	`gmail`	`https://assets.picaos.com/logos/gmail.svg`
Google Calendar	`google-calendar`	`https://assets.picaos.com/logos/google-calendar.svg`
Slack	`slack`	`https://assets.picaos.com/logos/slack.svg`
HubSpot	`hubspot`	`https://assets.picaos.com/logos/hubspot.svg`
Salesforce	`salesforce`	`https://assets.picaos.com/logos/salesforce.svg`
Notion	`notion`	`https://assets.picaos.com/logos/notion.svg`
Linear	`linear`	`https://assets.picaos.com/logos/linear.svg`
GitHub	`github`	`https://assets.picaos.com/logos/github.svg`
Jira	`jira`	`https://assets.picaos.com/logos/jira.svg`
Asana	`asana`	`https://assets.picaos.com/logos/asana.svg`
Stripe	`stripe`	`https://assets.picaos.com/logos/stripe.svg`
Shopify	`shopify`	`https://assets.picaos.com/logos/shopify.svg`
Zendesk	`zendesk`	`https://assets.picaos.com/logos/zendesk.svg`
Intercom	`intercom`	`https://assets.picaos.com/logos/intercom.svg`
Airtable	`airtable`	`https://assets.picaos.com/logos/airtable.svg`

Fetching Assets from API

通过API获取资源

The recommended way to get integration assets is via the Available Connectors API, which returns the official image URL for each integration.

获取集成工具资源的推荐方式是使用Available Connectors API，该API会返回每个集成工具的官方图片URL。

API Request

API请求

GET https://api.picaos.com/v1/available-connectors?limit=300
Headers:
  x-pica-secret: YOUR_PICA_SECRET_KEY

GET https://api.picaos.com/v1/available-connectors?limit=300
Headers:
  x-pica-secret: YOUR_PICA_SECRET_KEY

Response Structure

响应结构

json

{
  "rows": [
    {
      "platform": "gmail",
      "name": "Gmail",
      "category": "Communication",
      "image": "https://assets.picaos.com/logos/gmail.svg",
      "description": "..."
    },
    {
      "platform": "slack",
      "name": "Slack",
      "category": "Communication",
      "image": "https://assets.picaos.com/logos/slack.svg",
      "description": "..."
    }
  ],
  "total": 200,
  "pages": 1,
  "page": 1
}

json

{
  "rows": [
    {
      "platform": "gmail",
      "name": "Gmail",
      "category": "Communication",
      "image": "https://assets.picaos.com/logos/gmail.svg",
      "description": "..."
    },
    {
      "platform": "slack",
      "name": "Slack",
      "category": "Communication",
      "image": "https://assets.picaos.com/logos/slack.svg",
      "description": "..."
    }
  ],
  "total": 200,
  "pages": 1,
  "page": 1
}

Key Fields

关键字段

Field	Description
`platform`	Platform identifier (use for constructing URLs)
`name`	Display name
`image`	Official logo URL
`category`	Integration category

字段	描述
`platform`	平台标识符（用于构造URL）
`name`	显示名称
`image`	官方Logo URL
`category`	集成工具分类

Implementation

实现示例

Fetch All Integration Assets

获取所有集成工具资源

typescript

interface Integration {
  platform: string;
  name: string;
  image: string;
  category: string;
}

async function getIntegrations(): Promise<Integration[]> {
  const response = await fetch(
    "https://api.picaos.com/v1/available-connectors?limit=300",
    {
      headers: {
        "x-pica-secret": process.env.PICA_SECRET_KEY,
      },
    }
  );

  if (!response.ok) {
    throw new Error(`Failed to fetch integrations: ${response.status}`);
  }

  const data = await response.json();
  return data.rows;
}

typescript

interface Integration {
  platform: string;
  name: string;
  image: string;
  category: string;
}

async function getIntegrations(): Promise<Integration[]> {
  const response = await fetch(
    "https://api.picaos.com/v1/available-connectors?limit=300",
    {
      headers: {
        "x-pica-secret": process.env.PICA_SECRET_KEY,
      },
    }
  );

  if (!response.ok) {
    throw new Error(`Failed to fetch integrations: ${response.status}`);
  }

  const data = await response.json();
  return data.rows;
}

Build Asset URL from Platform ID

通过平台ID构造资源URL

typescript

function getIntegrationLogo(platform: string): string {
  return `https://assets.picaos.com/logos/${platform}.svg`;
}

// Usage
const gmailLogo = getIntegrationLogo("gmail");
// => "https://assets.picaos.com/logos/gmail.svg"

typescript

function getIntegrationLogo(platform: string): string {
  return `https://assets.picaos.com/logos/${platform}.svg`;
}

// 使用示例
const gmailLogo = getIntegrationLogo("gmail");
// => "https://assets.picaos.com/logos/gmail.svg"

Display Integration with Logo

展示带Logo的集成工具卡片

typescript

function IntegrationCard({ integration }) {
  const [imgError, setImgError] = useState(false);

  return (
    <div className="integration-card">
      {!imgError ? (
        <img
          src={integration.image}
          alt={integration.name}
          onError={() => setImgError(true)}
        />
      ) : (
        <div className="fallback-icon">
          {integration.name.charAt(0).toUpperCase()}
        </div>
      )}
      <span>{integration.name}</span>
    </div>
  );
}

typescript

function IntegrationCard({ integration }) {
  const [imgError, setImgError] = useState(false);

  return (
    <div className="integration-card">
      {!imgError ? (
        <img
          src={integration.image}
          alt={integration.name}
          onError={() => setImgError(true)}
        />
      ) : (
        <div className="fallback-icon">
          {integration.name.charAt(0).toUpperCase()}
        </div>
      )}
      <span>{integration.name}</span>
    </div>
  );
}

With Fallback URLs

带有备用URL的实现

If the primary asset URL fails, fall back to a generic icon service:

typescript

function getIntegrationLogo(platform: string, primaryUrl?: string): string {
  // Use API-provided URL if available
  if (primaryUrl) {
    return primaryUrl;
  }

  // Construct from pattern
  return `https://assets.picaos.com/logos/${platform}.svg`;
}

function getFallbackLogo(platform: string): string {
  // SimpleIcons as fallback
  return `https://cdn.simpleicons.org/${platform}`;
}

如果主资源URL加载失败，可切换到通用图标服务作为备用：

typescript

function getIntegrationLogo(platform: string, primaryUrl?: string): string {
  // 如果API提供了URL则使用该地址
  if (primaryUrl) {
    return primaryUrl;
  }

  // 按照格式构造URL
  return `https://assets.picaos.com/logos/${platform}.svg`;
}

function getFallbackLogo(platform: string): string {
  // 使用SimpleIcons作为备用
  return `https://cdn.simpleicons.org/${platform}`;
}

Caching Assets

资源缓存

For production applications, cache the integration list to reduce API calls:

typescript

let cachedIntegrations: Integration[] | null = null;
let cacheTime: number = 0;
const CACHE_DURATION = 60 * 60 * 1000; // 1 hour

async function getIntegrationsCached(): Promise<Integration[]> {
  const now = Date.now();

  if (cachedIntegrations && now - cacheTime < CACHE_DURATION) {
    return cachedIntegrations;
  }

  cachedIntegrations = await getIntegrations();
  cacheTime = now;

  return cachedIntegrations;
}

对于生产环境应用，建议缓存集成工具列表以减少API调用次数：

typescript

let cachedIntegrations: Integration[] | null = null;
let cacheTime: number = 0;
const CACHE_DURATION = 60 * 60 * 1000; // 1小时

async function getIntegrationsCached(): Promise<Integration[]> {
  const now = Date.now();

  if (cachedIntegrations && now - cacheTime < CACHE_DURATION) {
    return cachedIntegrations;
  }

  cachedIntegrations = await getIntegrations();
  cacheTime = now;

  return cachedIntegrations;
}

Filtering by AuthKit Support

筛选支持AuthKit的集成工具

To get only integrations that support OAuth via AuthKit:

GET https://api.picaos.com/v1/available-connectors?authkit=true&limit=300

This filters to integrations that can be connected via the AuthKit widget.

若要仅获取支持通过AuthKit实现OAuth的集成工具，可使用以下请求：

GET https://api.picaos.com/v1/available-connectors?authkit=true&limit=300

此请求将筛选出可通过AuthKit小部件连接的集成工具。

Asset Specifications

资源规格

Property	Value
Format	SVG (scalable)
Background	Transparent
Recommended display size	24x24 to 64x64 px
Color	Original brand colors

属性	值
格式	SVG（可缩放）
背景	透明
推荐显示尺寸	24x24 至 64x64 px
颜色	品牌原始配色

Troubleshooting

故障排除

Issue	Cause	Solution
404 on asset URL	Invalid platform ID	Verify platform ID from API response
Image not loading	CORS or network issue	Use `img` tag or proxy through your server
Wrong logo displayed	Platform ID mismatch	Use exact `platform` value from API, not display name
Blurry logo	Scaling PNG	Assets are SVG, ensure proper rendering

问题	原因	解决方案
资源URL返回404	平台ID无效	从API响应中验证平台ID
图片无法加载	CORS或网络问题	使用 `img` 标签或通过您的服务器代理
显示错误的Logo	平台ID不匹配	使用API返回的精确 `platform` 值，而非显示名称
Logo模糊	缩放PNG图片	资源为SVG格式，请确保正确渲染

API Reference

API参考

Endpoints

端点

Endpoint	Description
`GET /v1/available-connectors`	List all integrations with assets
`GET /v1/available-connectors?authkit=true`	List OAuth-enabled integrations

端点	描述
`GET /v1/available-connectors`	列出所有带有资源的集成工具
`GET /v1/available-connectors?authkit=true`	列出支持OAuth的集成工具

Asset URL

资源URL

https://assets.picaos.com/logos/{platform}.svg

Replace

{platform}

with the platform identifier from the API response.

https://assets.picaos.com/logos/{platform}.svg

将

{platform}

替换为API响应中的平台标识符。

Documentation

文档

Pica Docs: https://docs.picaos.com
Available Connectors: https://docs.picaos.com/available-connectors

Pica文档：https://docs.picaos.com
可用集成工具：https://docs.picaos.com/available-connectors