pebble-shared

pebble-shared

A set of utilities and icons shared between pebble-native and pebble-web.

Install

yarn add pebble-shared

Using icons in React Native

Add the following in your package.json;

"rnpm": {
    "assets": {
        "./node_modules/pebble-shared/native/icons"
    }
}

Then run react-native link. and then it can be used by importing the Icon component.

import { Icon } from "@anarock/pebble/native";

// Usage
<Icon name="iconName" size={20} color="#000000" />;

Using in Expo

In your entry file App.js

export default class App extends Component {
  state = {
    fontsLoaded: false
  };

  async componentDidMount() {
    await Font.loadAsync({
      pebble: require("./node_modules/pebble-shared/native/icons/pebble.ttf")
    });

    this.setState({
      fontsLoaded: true
    });
  }

  render() {
    return this.state.fontsLoaded && <Main />;
  }
}

Acknowledgements

We use Chromaticqa for visual regression testing and it is awesome.

License

MIT

Add Icons from Figma

• Add Material Design plugin to your Figma file.
• Create a 1000 x 1000 frame with the fill turned off.
• Insert desired icon from the plugin into the frame and set its longest dimension to 1000 with constraint proportions on.
• Center align the vector with the frame and export the frame as svg.