Skip to content

Commit a8a2daa

Browse files
nampdnnampdn
committed
build(bara-react-icons): tweak build process to make it bundle bara-react-icons
1 parent e84eb2a commit a8a2daa

File tree

12 files changed

+335
-33
lines changed

12 files changed

+335
-33
lines changed

‎.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎@types/react-native-vector-icons/index.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
declare module 'react-native-vector-icons' {
2+
export * from 'react-native-vector-icons'
3+
}
4+
5+
declare module 'react-native-vector-icons/dist/MaterialIcons' {}
6+
7+
declare module 'react-native-vector-icons/dist/Octicons' {}
8+
9+
declare module 'react-native-vector-icons/Fonts/MaterialIcons.ttf' {}
10+
11+
declare module 'react-native-vector-icons/Fonts/Octicons.ttf' {}

‎@types/react-native-web/index.d.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
declare module 'react-native-web' {
2+
export * from 'react-native'
3+
}
4+
5+
namespace JSX {
6+
import * as ReactNative from 'react-native'
7+
interface IntrinsicAttributes extends React.Attributes {
8+
accessibilityRole?:
9+
| ReactNative.AccessibilityRole
10+
| 'article' // article
11+
| 'banner' // header
12+
| 'button' // button
13+
| 'complementary' // aside
14+
| 'contentinfo' // footer
15+
| 'form' // form
16+
| 'heading' // h1, h2, h3, ...
17+
| 'label' // label
18+
| 'link' // a
19+
| 'list' // ul
20+
| 'listitem' // li
21+
| 'main' // main
22+
| 'navigation' // nav
23+
| 'region' // section
24+
className?: string
25+
tabIndex?: number
26+
}
27+
}

‎@types/react-native/index.d.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export * from 'react-native'
2+
3+
declare module 'react-native' {
4+
export namespace Animated {
5+
export type AnimatedComponent<
6+
T extends React.ComponentClass
7+
> = (T extends React.ComponentClass<infer P>
8+
? React.ComponentClass<P>
9+
: React.ComponentClass) & {
10+
getNode(): InstanceType<T>
11+
}
12+
13+
export function createAnimatedComponent<
14+
T extends React.ComponentClass<any, any>
15+
>(component: T): AnimatedComponent<T>
16+
17+
export const View: AnimatedComponent<typeof View>
18+
export const Image: AnimatedComponent<typeof Image>
19+
export const Text: AnimatedComponent<typeof Text>
20+
export const ScrollView: AnimatedComponent<typeof ScrollView>
21+
}
22+
}

‎craco.config.js‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,6 @@ module.exports = {
1717
require.resolve('babel-plugin-react-native-web'),
1818
].concat(config.module.rules[2].oneOf[1].options.plugins)
1919

20-
const vectorIcons = {
21-
test: /\.ttf$/,
22-
loader: 'url-loader', // or directly file-loader
23-
include: path.resolve(
24-
__dirname,
25-
'node_modules/react-native-vector-icons',
26-
),
27-
}
28-
29-
config.module.rules.push(vectorIcons)
3020
config.module.rules = config.module.rules.filter(Boolean) // Clear null rules
3121

3222
config.plugins[9].tsconfig = resolveApp('tsconfig.web.json')

‎package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"do:desktop": "cross-env BROWSER=none concurrently \"yarn dev:web\" \"yarn compile:desktop -w\" \"wait-on http://localhost:3000 && yarn watch:desktop\"",
1515
"compile": "run-s compile:tsc compile:web compile:desktop",
1616
"compile:tsc": "tsc -b",
17-
"compile:web": "react-scripts build",
17+
"compile:web": "craco build",
1818
"compile:desktop": "tsc -b ./tsconfig.desktop.json",
1919
"build:desktop": "run-s clean compile:desktop compile:web build:desktop:cpres build:desktop:electron",
2020
"build:desktop:cpres": "shx cp -R build dist/web",
@@ -27,14 +27,16 @@
2727
"dependencies": {
2828
"bara": "2.3.1",
2929
"bara-react": "2.0.1",
30-
"bara-react-icons": "1.0.0",
30+
"bara-react-icons": "1.1.0",
3131
"electron-store": "3.2.0",
3232
"electron-updater": "4.0.6",
3333
"jsonfile": "5.0.0",
3434
"mkdirp": "0.5.1",
3535
"react": "16.8.6",
36+
"react-app-polyfill": "0.2.2",
3637
"react-dom": "16.8.6",
37-
"react-native": "0.59.4"
38+
"react-native": "0.59.4",
39+
"react-native-vector-icons": "6.4.2"
3840
},
3941
"devDependencies": {
4042
"@babel/core": "7.4.3",
@@ -50,6 +52,7 @@
5052
"@types/node": "11.13.4",
5153
"@types/react": "16.8.13",
5254
"@types/react-native": "0.57.45",
55+
"@types/react-native-vector-icons": "6.4.0",
5356
"@types/react-test-renderer": "16.8.1",
5457
"babel-plugin-react-native-web": "0.11.2",
5558
"concurrently": "4.1.0",
@@ -63,7 +66,6 @@
6366
"nodemon": "1.18.11",
6467
"npm-run-all": "4.1.5",
6568
"prettier": "1.17.0",
66-
"react-app-polyfill": "0.2.2",
6769
"react-scripts": "2.1.8",
6870
"react-test-renderer": "16.8.6",
6971
"shx": "0.3.2",

‎src/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@
99
*/
1010

1111
import { BaraProvider, TouchableOpacity } from 'bara-react'
12-
import { Octicons } from 'bara-react-icons'
1312
import React, { Component } from 'react'
1413
import { Platform, StyleSheet, Text, View } from 'react-native'
1514

15+
import { Octicons as Icon } from 'bara-react-icons/es'
16+
1617
import { Sidebar } from './features/sidebar'
1718

1819
const instructions = Platform.select({
@@ -28,7 +29,7 @@ export default class App extends Component<Props> {
2829
return (
2930
<BaraProvider>
3031
<View style={styles.container}>
31-
<Octicons name="gear" size={30} />
32+
<Icon name="chevron-right" size={30} />
3233
<Text style={styles.welcome}>Welcome to Bara React Native!</Text>
3334
<Text style={styles.instructions}>To get started, edit App.tsx</Text>
3435
<Text style={styles.instructions}>{instructions}</Text>

‎src/lib/index.shared.ts‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
// import { IconProps } from 'react-native-vector-icons/Icon'
2+
3+
export type Color = number | string
4+
5+
export interface IconProps {
6+
allowFontScaling?: boolean
7+
color?: Color
8+
name: string
9+
size?: number
10+
}
11+
12+
export type GitHubIcon =
13+
| 'alert'
14+
| 'archive'
15+
| 'arrow-down'
16+
| 'arrow-left'
17+
| 'arrow-ref_type-down'
18+
| 'arrow-right'
19+
| 'arrow-small-left'
20+
| 'arrow-small-right'
21+
| 'arrow-small-up'
22+
| 'arrow-up'
23+
| 'beaker'
24+
| 'bell'
25+
| 'bold'
26+
| 'book'
27+
| 'bookmark'
28+
| 'briefcase'
29+
| 'broadcast'
30+
| 'browser'
31+
| 'bug'
32+
| 'calendar'
33+
| 'check'
34+
| 'checklist'
35+
| 'chevron-down'
36+
| 'chevron-left'
37+
| 'chevron-right'
38+
| 'chevron-up'
39+
| 'circle-slash'
40+
| 'circuit-board'
41+
| 'clippy'
42+
| 'clock'
43+
| 'cloud-download'
44+
| 'cloud-upload'
45+
| 'code'
46+
| 'comment'
47+
| 'comment-discussion'
48+
| 'credit-card'
49+
| 'dash'
50+
| 'dashboard'
51+
| 'database'
52+
| 'desktop-download'
53+
| 'device-camera'
54+
| 'device-camera-video'
55+
| 'device-desktop'
56+
| 'device-mobile'
57+
| 'diff'
58+
| 'diff-added'
59+
| 'diff-ignored'
60+
| 'diff-modified'
61+
| 'diff-removed'
62+
| 'diff-renamed'
63+
| 'ellipses'
64+
| 'ellipsis'
65+
| 'eye'
66+
| 'file'
67+
| 'file-binary'
68+
| 'file-code'
69+
| 'file-directory'
70+
| 'file-media'
71+
| 'file-pdf'
72+
| 'file-submodule'
73+
| 'file-symlink-directory'
74+
| 'file-symlink-file'
75+
| 'file-text'
76+
| 'file-zip'
77+
| 'flame'
78+
| 'fold'
79+
| 'gear'
80+
| 'gift'
81+
| 'gist'
82+
| 'gist-secret'
83+
| 'git-branch'
84+
| 'git-commit'
85+
| 'git-compare'
86+
| 'git-merge'
87+
| 'git-pull-request'
88+
| 'globe'
89+
| 'grabber'
90+
| 'graph'
91+
| 'heart'
92+
| 'history'
93+
| 'home'
94+
| 'horizontal-rule'
95+
| 'hubot'
96+
| 'inbox'
97+
| 'info'
98+
| 'issue-closed'
99+
| 'issue-opened'
100+
| 'issue-reopened'
101+
| 'italic'
102+
| 'jersey'
103+
| 'key'
104+
| 'keyboard'
105+
| 'law'
106+
| 'light-bulb'
107+
| 'link'
108+
| 'link-external'
109+
| 'list-ordered'
110+
| 'list-unordered'
111+
| 'location'
112+
| 'lock'
113+
| 'logo-gist'
114+
| 'logo-github'
115+
| 'mail'
116+
| 'mail-read'
117+
| 'mail-reply'
118+
| 'mark-github'
119+
| 'markdown'
120+
| 'megaphone'
121+
| 'mention'
122+
| 'milestone'
123+
| 'mirror'
124+
| 'mortar-board'
125+
| 'mute'
126+
| 'no-newline'
127+
| 'note'
128+
| 'octoface'
129+
| 'organization'
130+
| 'package'
131+
| 'paintcan'
132+
| 'pencil'
133+
| 'person'
134+
| 'pin'
135+
| 'plug'
136+
| 'plus'
137+
| 'plus-small'
138+
| 'primitive-dot'
139+
| 'primitive-square'
140+
| 'project'
141+
| 'pulse'
142+
| 'question'
143+
| 'quote'
144+
| 'radio-tower'
145+
| 'reply'
146+
| 'repo'
147+
| 'repo-clone'
148+
| 'repo-force-push'
149+
| 'repo-forked'
150+
| 'repo-pull'
151+
| 'repo-push'
152+
| 'rocket'
153+
| 'rss'
154+
| 'ruby'
155+
| 'screen-full'
156+
| 'screen-normal'
157+
| 'search'
158+
| 'server'
159+
| 'settings'
160+
| 'shield'
161+
| 'sign-in'
162+
| 'sign-out'
163+
| 'smiley'
164+
| 'squirrel'
165+
| 'star'
166+
| 'stop'
167+
| 'sync'
168+
| 'tag'
169+
| 'tasklist'
170+
| 'telescope'
171+
| 'terminal'
172+
| 'text-size'
173+
| 'three-bars'
174+
| 'thumbsdown'
175+
| 'thumbsup'
176+
| 'tools'
177+
| 'trashcan'
178+
| 'triangle-down'
179+
| 'triangle-left'
180+
| 'triangle-right'
181+
| 'triangle-up'
182+
| 'unfold'
183+
| 'unmute'
184+
| 'unverified'
185+
| 'verified'
186+
| 'versions'
187+
| 'watch'
188+
| 'x'
189+
| 'zap'
190+
191+
export interface OcticonIconProps extends IconProps {
192+
name: GitHubIcon
193+
}

‎src/lib/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
2+
import Octicons from 'react-native-vector-icons/Octicons'
3+
4+
export * from './index.shared'
5+
6+
export { MaterialIcons, Octicons }

‎src/lib/index.web.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import MaterialIcons from 'react-native-vector-icons/dist/MaterialIcons'
2+
import Octicons from 'react-native-vector-icons/dist/Octicons'
3+
import MaterialIconFont from 'react-native-vector-icons/Fonts/MaterialIcons.ttf'
4+
import OcticonsFont from 'react-native-vector-icons/Fonts/Octicons.ttf'
5+
6+
export * from './index.shared'
7+
8+
export { Octicons, MaterialIcons }
9+
10+
const iconStyles = [
11+
`@font-face { src:url(${MaterialIconFont});font-family: MaterialIcons; }`,
12+
`@font-face { src:url(${OcticonsFont});font-family: Octicons; }`,
13+
].join('\n')
14+
15+
const style = document.createElement('style')
16+
style.type = 'text/css'
17+
18+
if ((style as any).styleSheet) {
19+
;(style as any).styleSheet.cssText = iconStyles
20+
} else {
21+
style.appendChild(document.createTextNode(iconStyles))
22+
}
23+
24+
if (document.head) document.head.appendChild(style)

0 commit comments

Comments
 (0)