TikTok Icon Support?

[Aryk]

I noticed in:

https://icons.expo.fyi/

That we don't have any TikTok icons.

How can someone on Expo Managed get this icon?

The icon exists in many of these like libraries (like font awesome), just can't seem to easily get them into Expo.

[georgii-ivanov]

Also need this

[Aryk]

@georgii-ivanov bandaid for you 😄

// @aryk - Not on expo icons yet so had to create this from a SVG file.
function TikTokIcon({style: {color: _color, fontSize, ...style} = {}}: {style?: ViewStyle & {color?: ColorValue, fontSize?: number}}) {
  const {themeVariables} = useTheme();

  const color: string = (_color as string) || themeVariables.textColor;
  fontSize = fontSize || 17;

  const viewportWidth  = 2859;
  const viewportHeight = 3333;
  const width = fontSize * viewportHeight / viewportWidth;

  return <Svg
    viewBox={`0 0 ${viewportWidth} ${viewportHeight}`}
    width={width * 0.9}
    height={fontSize * 0.9}
    color={color}
    style={style}
  >
    <Path
      d="M2081 0c55 473 319 755 778 785v532c-266 26-499-61-770-225v995c0 1264-1378 1659-1932 753-356-583-138-1606 1004-1647v561c-87 14-180 36-265 65-254 86-398 247-358 531 77 544 1075 705 992-358V1h551z"
      fill={color}
    />
  </Svg>;
}

[elliotfleming]

Alternatively you can load fontAwesome directly in your expo app instead of through vector-icons... here's an example <SocialIcon /> component.

<SocialIcon icon={field.icon} size={36} />

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab); // fab loads ALL branding icons

export const colors = {
  angellist: '#1c4082',
  codepen: '#000000',
  discord: '#6e84d3',
  facebook: '#3b5998',
  foursquare: '#0072b1',
  github: '#000000',
  'github-alt': '#000000',
  gitlab: '#e14329',
  'google-plus-official': '#dd4b39',
  instagram: '#517fa4',
  link: '#517fa4',
  linkedin: '#007bb6',
  medium: '#02b875',
  pinterest: '#cb2027',
  quora: '#a82400',
  snapchat: '#fffc00',
  soundcloud: '#f50',
  stumbleupon: '#EB4823',
  tiktok: '#010101',
  tumblr: '#32506d',
  twitch: '#6441A5',
  twitter: '#00aced',
  vimeo: '#aad450',
  wordpress: '#21759b',
  youtube: '#bb0000',
}

export default function SocialIcon({ icon, color, ...props }) {
  return (
    <FontAwesomeIcon
      {...props}
      color={color || colors[icon]}
      icon={['fab', icon]}
    />
  );
}

[noltron000]

Hey all, looks like this has been solved. If you are using @expo/vector-icons version 13.0.0, you can use the tiktok logo from Font Awesome 5, like so: https://icons.expo.fyi/FontAwesome5/tiktok

[adherb]

This doesn't work in React Native Web.

I get the following error when trying what @noltron000 has suggested:

Error: Expected font asset of type `string | FontResource | Asset` (number is not supported on web) instead got: null

Does anyone have any idea how I can fix this?