├── .eslintrc.js ├── .gitignore ├── .npmignore ├── README.md ├── example ├── .gitignore ├── App.tsx ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── ios │ ├── .gitignore │ ├── .xcode.env │ ├── Podfile │ ├── Podfile.lock │ ├── Podfile.properties.json │ ├── sweetsfsymbolsexample.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── sweetsfsymbolsexample.xcscheme │ ├── sweetsfsymbolsexample.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ └── sweetsfsymbolsexample │ │ ├── AppDelegate.h │ │ ├── AppDelegate.mm │ │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── App-Icon-1024x1024@1x.png │ │ │ └── Contents.json │ │ ├── Contents.json │ │ ├── SplashScreen.imageset │ │ │ ├── Contents.json │ │ │ └── image.png │ │ └── SplashScreenBackground.imageset │ │ │ ├── Contents.json │ │ │ └── image.png │ │ ├── Info.plist │ │ ├── SplashScreen.storyboard │ │ ├── Supporting │ │ └── Expo.plist │ │ ├── main.m │ │ ├── noop-file.swift │ │ ├── sweetsfsymbolsexample-Bridging-Header.h │ │ └── sweetsfsymbolsexample.entitlements ├── metro.config.js ├── package-lock.json ├── package.json ├── tsconfig.json └── webpack.config.js ├── expo-module.config.json ├── ios ├── SweetSFSymbols.podspec ├── SweetSFSymbolsExpoView.swift ├── SweetSFSymbolsModifiers.swift ├── SweetSFSymbolsModule.swift ├── SweetSFSymbolsProps.swift └── SweetSFSymbolsView.swift ├── package-lock.json ├── package.json ├── src ├── SweetSFSymbols.types.ts ├── SweetSFSymbolsView.ios.tsx ├── SweetSFSymbolsView.ts └── index.ts └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['universe/native', 'universe/web'], 4 | ignorePatterns: ['build'], 5 | }; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # VSCode 6 | .vscode/ 7 | jsconfig.json 8 | 9 | # Xcode 10 | # 11 | build/ 12 | *.pbxuser 13 | !default.pbxuser 14 | *.mode1v3 15 | !default.mode1v3 16 | *.mode2v3 17 | !default.mode2v3 18 | *.perspectivev3 19 | !default.perspectivev3 20 | xcuserdata 21 | *.xccheckout 22 | *.moved-aside 23 | DerivedData 24 | *.hmap 25 | *.ipa 26 | *.xcuserstate 27 | project.xcworkspace 28 | 29 | # Android/IJ 30 | # 31 | .classpath 32 | .cxx 33 | .gradle 34 | .idea 35 | .project 36 | .settings 37 | local.properties 38 | android.iml 39 | android/app/libs 40 | android/keystores/debug.keystore 41 | 42 | # Cocoapods 43 | # 44 | example/ios/Pods 45 | 46 | # Ruby 47 | example/vendor/ 48 | 49 | # node.js 50 | # 51 | node_modules/ 52 | npm-debug.log 53 | yarn-debug.log 54 | yarn-error.log 55 | 56 | # Expo 57 | .expo/* 58 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Exclude all top-level hidden directories by convention 2 | /.*/ 3 | 4 | __mocks__ 5 | __tests__ 6 | 7 | /babel.config.js 8 | /android/src/androidTest/ 9 | /android/src/test/ 10 | /android/build/ 11 | /example/ 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/hugemathguy) 2 | 3 | # Sweet SF Symbols 4 | 5 | [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/foundations/sf-symbols) are a set of over 5,000 consistent, highly configurable symbols you can use in your app. SF Symbols are designed to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes. 6 | 7 | ## Highlights 8 | 9 | - :fire: Built with [Expo's Module API](https://docs.expo.dev/modules/module-api/) 10 | - :art: [Rendering modes](https://developer.apple.com/design/human-interface-guidelines/foundations/sf-symbols#rendering-modes) 11 | - :art: [Variable color values](https://developer.apple.com/design/human-interface-guidelines/foundations/sf-symbols#variable-color) 12 | - :no_bell: [Symbol Variants](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Design-variants) 13 | - :tada: [Symbol Effects](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Animations) 14 | - :apple: iOS only ([see why](https://developer.apple.com/design/human-interface-guidelines/foundations/sf-symbols#custom-symbols)) 15 | 16 | ## Installation 17 | 18 | Sweet SFSymbols requires Expo SDK 46+ and Xcode 15+. 19 | 20 | ### Expo 21 | 22 | Install the library: 23 | 24 | ```console 25 | npx expo install sweet-sfsymbols 26 | ``` 27 | 28 | Then rebuild your app: 29 | 30 | ```bash 31 | # Using EAS? run a build in the cloud! 32 | eas build --platform ios 33 | 34 | # Otherwise, prebuild and run a local build 35 | npx expo prebuild -p ios --clean 36 | npx expo run:ios 37 | ``` 38 | 39 | > **_NOTE:_** This library will not work with Expo Go. Use a [development build](https://docs.expo.dev/develop/development-builds/create-a-build/) instead! 40 | 41 | ## Usage 42 | 43 | See the [example app](/example). 44 | 45 | ## `` 46 | 47 | The `SFSymbol` component uses SwiftUI's `Image` view to render SF Symbols. 48 | 49 | ### `Props` 50 | 51 | #### `name` 52 | 53 | The name of the symbol. 54 | 55 | > required: yes 56 | > 57 | > type: [`SystemName`](./src/SweetSFSymbols.types.ts) 58 | > 59 | > default: `""` 60 | 61 | #### `colors` 62 | 63 | The colors of the symbol. For monochrome and hierarchical rendering modes, this is a single color. For palette rendering mode, this is an array of colors. For multicolor rendering mode, this is ignored and system default values are used. This supports hex, hsl(a), rgb(a), web standard color names, PlatformColor and DynamicColorIOS values. 64 | 65 | > required: no 66 | > 67 | > type: `(string | OpaqueColorValue)[]` 68 | > 69 | > default: `[]` 70 | 71 | #### `weight` 72 | 73 | The weight of the symbol. 74 | 75 | > required: no 76 | > 77 | > type: `"thin" | "ultraLight" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"` 78 | > 79 | > default: `"regular"` 80 | 81 | #### `scale` 82 | 83 | The scale of the symbol. 84 | 85 | > required: no 86 | > 87 | > type: `"small" | "medium" | "large"` 88 | > 89 | > default: `"medium"` 90 | 91 | #### `renderingMode` (iOS 15+) 92 | 93 | The rendering mode of the symbol. Learn more about rendering modes [here](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Rendering-modes). 94 | 95 | > required: no 96 | > 97 | > type: `"monochrome" | "hierarchical" | "palette" | "multicolor"` 98 | > 99 | > default: `"monochrome"` 100 | 101 | #### `size` 102 | 103 | The size of the symbol. This deifines the frame of the image view. 104 | 105 | > required: no 106 | > 107 | > type: `number` 108 | > 109 | > default: `50` 110 | 111 | #### `variableValue` (iOS 16+) 112 | 113 | The variable value of the symbol. Only some symbols support variable values, ususally those that represent a change in value (like `speaker.wave.3`) The variable value determines what percentage of the symbol is filled in. Learn more about variable values [here](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Variable-color). 114 | 115 | > required: no 116 | > 117 | > type: `number` 118 | > 119 | > default: `1.0` 120 | 121 | #### `variant` (iOS 15+) 122 | 123 | The variant of the symbol. This is an alternate way to modify the symbol's appearance without modifying the symbol name. Learn more about symbol variants [here](https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Design-variants). 124 | 125 | > required: no 126 | > 127 | > type: [SymbolVariant](./src/SweetSFSymbols.types.ts) 128 | > 129 | > default: `none` 130 | 131 | #### `symbolEffect` (iOS 17+) 132 | 133 | The symbol effect of the symbol. Adds an animation to the symbol. Learn more about symbol effects [here](https://blorenzop.medium.com/how-to-animate-sf-symbols-in-swiftui-c3b504af4f44). 134 | 135 | > required: no 136 | > 137 | > type: [`SymbolEffect`](./src/SweetSFSymbols.types.ts) 138 | > 139 | > default: `undefined` 140 | 141 | #### `style` 142 | 143 | The style of the symbol. 144 | 145 | > required: no 146 | > 147 | > type: `ViewStyle` 148 | > 149 | > default: `undefined` 150 | 151 | ## Disclaimer 152 | 153 | It's your responsibility to check Apple's rules about when and where certain icons can be used. You can check the [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/sf-symbols) and use the [official SF Symbols app](https://developer.apple.com/sf-symbols/) to check for any restrictions on the icons you want to use. 154 | 155 | This library isn't associated with Apple, and only exposes a way to use them within React Native apps on iOS. 156 | 157 | ## Symbol names not up to date? 158 | 159 | If you notice that the symbol names are not up to date, either submit an issue or a PR with the updated symbol names! 160 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { 3 | Button, 4 | PlatformColor, 5 | ScrollView, 6 | StyleSheet, 7 | Text, 8 | TouchableOpacity, 9 | View, 10 | } from "react-native"; 11 | import SweetSFSymbol from "sweet-sfsymbols"; 12 | 13 | export default function App() { 14 | const [appearIsActive, setAppearIsActive] = useState(false); 15 | const [disappearIsActive, setDisappearIsActive] = useState(false); 16 | const [bounceValue, setBounceValue] = useState(false); 17 | const [pulseValue, setPulseValue] = useState(0); 18 | const [pulseIsActive, setPulseIsActive] = useState(false); 19 | const [scaleIsActive, setScaleIsActive] = useState(false); 20 | const [variableColorIsActive, setVariableColorIsActive] = useState(false); 21 | const [variableColorValue, setVariableColorValue] = useState(0); 22 | const [replaceIsActive, setReplaceIsActive] = useState(false); 23 | const [variableValue, setVariableValue] = useState(0); 24 | 25 | return ( 26 | 27 | 28 | {/* Symbol Variants */} 29 | Symbol Variants 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | {/* Rendering Modes */} 38 | Rendering Modes 39 | 40 | Palette 41 | 46 | 47 | 48 | Hierarchical 49 | 54 | 55 | 56 | Monochrome 57 | 62 | 63 | 64 | Multicolor 65 | 70 | 71 | {/* Variable Value */} 72 | Variable Values 73 | 74 | 75 | setVariableValue(variableValue + 0.1)} 78 | onDecrement={() => setVariableValue(variableValue - 0.1)} 79 | /> 80 | 85 | 86 | {/* Symbol Effect */} 87 | Discrete Symbol Effect 88 | 89 | 90 | Bounce 91 |