-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(icon): basic implementation of adaptive icon generation for Android
release-npm
- Loading branch information
Showing
7 changed files
with
264 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
import { existsSync, mkdirSync, writeFileSync, readFileSync } from 'node:fs' | ||
import { dirname, join, extname } from 'path' | ||
import svg2vectordrawable from 'svg2vectordrawable' | ||
import { Log, Options } from './index' | ||
|
||
const androidXMLFiles = () => [ | ||
{ | ||
path: 'android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml', | ||
contents: `<?xml version="1.0" encoding="utf-8"?> | ||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> | ||
<background android:drawable="@drawable/ic_launcher_background" /> | ||
<foreground android:drawable="@drawable/ic_launcher_foreground" /> | ||
</adaptive-icon>`, | ||
}, | ||
{ | ||
path: 'android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml', | ||
contents: `<?xml version="1.0" encoding="utf-8"?> | ||
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> | ||
<background android:drawable="@drawable/ic_launcher_background" /> | ||
<foreground android:drawable="@drawable/ic_launcher_foreground" /> | ||
</adaptive-icon>`, | ||
}, | ||
] | ||
|
||
// Options see https://www.npmjs.com/package/svg2vectordrawable | ||
const convertSVG = async (svgContents: string) => { | ||
return svg2vectordrawable(svgContents, { xmlTag: true }) | ||
} | ||
|
||
export const getFileType = (fileName?: string) => extname(fileName ?? '').replace('.', '') | ||
|
||
const writeResFile = (nativePath: string, path: string, contents: string) => { | ||
const destinationFile = join(nativePath, 'android/app/src/main/res', path) | ||
const directory = dirname(destinationFile) | ||
if (!existsSync(directory)) { | ||
mkdirSync(directory, { recursive: true }) | ||
} | ||
writeFileSync(destinationFile, contents) | ||
} | ||
|
||
export const generateAndroidAdaptiveIcons = async ( | ||
nativePath: string, | ||
options: Options, | ||
log: Log | ||
) => { | ||
const xmlFiles = androidXMLFiles() | ||
|
||
if ( | ||
!options.androidForeground || | ||
(!options.androidBackground && !options.androidBackgroundColor) | ||
) { | ||
log('Not creating adaptive icons for Android') | ||
return | ||
} | ||
|
||
const foregroundType = getFileType(options.androidForeground) | ||
const backgroundType = !options.androidBackgroundColor && getFileType(options.androidBackground) | ||
|
||
if (foregroundType !== 'svg' && foregroundType !== 'xml') { | ||
log('"androidForeground" invalid, .svg or .xml file required') | ||
} | ||
|
||
if (!options.androidBackgroundColor && backgroundType !== 'svg' && backgroundType !== 'xml') { | ||
log('"androidBackground" invalid, .svg or .xml file required') | ||
} | ||
|
||
// Create importing files. | ||
xmlFiles.forEach((file) => { | ||
const destinationFile = join(nativePath, file.path) | ||
const directory = dirname(destinationFile) | ||
if (!existsSync(directory)) { | ||
mkdirSync(directory, { recursive: true }) | ||
} | ||
writeFileSync(destinationFile, file.contents) | ||
}) | ||
|
||
if (foregroundType === 'svg') { | ||
const foregroundSVGContents = readFileSync( | ||
join(process.cwd(), options.androidForeground), | ||
'utf-8' | ||
) | ||
const foregroundVector = await convertSVG(foregroundSVGContents) | ||
writeResFile(nativePath, 'drawable-v24/ic_launcher_foreground.xml', foregroundVector) | ||
} | ||
|
||
if (foregroundType === 'xml') { | ||
const foregroundXMLContents = readFileSync( | ||
join(process.cwd(), options.androidForeground), | ||
'utf-8' | ||
) | ||
writeResFile(nativePath, 'drawable-v24/ic_launcher_foreground.xml', foregroundXMLContents) | ||
} | ||
|
||
if (!options.androidBackgroundColor && backgroundType === 'svg') { | ||
const backgroundSVGContents = readFileSync( | ||
join(process.cwd(), options.androidBackground as string), | ||
'utf-8' | ||
) | ||
const backgroundVector = await convertSVG(backgroundSVGContents) | ||
writeResFile(nativePath, 'drawable/ic_launcher_background.xml', backgroundVector) | ||
} | ||
|
||
if (!options.androidBackgroundColor && backgroundType === 'xml') { | ||
const backgroundXMLContents = readFileSync( | ||
join(process.cwd(), options.androidBackground as string), | ||
'utf-8' | ||
) | ||
writeResFile(nativePath, 'drawable/ic_launcher_background.xml', backgroundXMLContents) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import { cpSync, existsSync, mkdirSync } from 'fs' | ||
import { join } from 'path' | ||
import { expect, test, beforeEach, afterEach, vi } from 'vitest' | ||
import { prepare, environment, packageJson, listFilesMatching, readFile, file } from 'jest-fixture' | ||
import plugin from '../index' | ||
import { getFileType } from '../adaptive-icon' | ||
|
||
const initialCwd = process.cwd() | ||
|
||
// @ts-ignore | ||
global.jest = { spyOn: vi.spyOn } | ||
// @ts-ignore | ||
global.beforeEach = beforeEach | ||
// @ts-ignore | ||
global.afterEach = afterEach | ||
|
||
environment('adaptive') | ||
|
||
test('Creates proper description XML files when adaptive icon input is supplied.', async () => { | ||
prepare([packageJson('adaptive'), file('ios/test.xml', '')]) | ||
|
||
// Regular logo, still required. | ||
cpSync(join(initialCwd, 'test/logo.png'), join(process.cwd(), 'logo.png')) | ||
mkdirSync(join(process.cwd(), 'ios/numic/Images.xcassets'), { recursive: true }) | ||
|
||
const backgroundPath = join(process.cwd(), 'image/my-background.svg') | ||
const foregroundPath = join(process.cwd(), 'image/my-foreground.svg') | ||
|
||
cpSync(join(initialCwd, 'test/background.svg'), backgroundPath) | ||
cpSync(join(initialCwd, 'test/logo.svg'), foregroundPath) | ||
|
||
expect(existsSync(backgroundPath)).toBe(true) | ||
expect(existsSync(foregroundPath)).toBe(true) | ||
|
||
await plugin({ | ||
options: { | ||
androidBackground: 'image/my-background.svg', | ||
androidForeground: 'image/my-foreground.svg', | ||
}, | ||
}) | ||
|
||
const iosPngImages = listFilesMatching('ios/**/*.png') | ||
const androidPngImages = listFilesMatching('android/**/*.png') | ||
|
||
// Regular icons still generated. | ||
expect(iosPngImages.length + androidPngImages.length).toBe(19) | ||
|
||
const androidXMLFiles = listFilesMatching('android/app/src/main/res/**/*.xml') | ||
|
||
expect( | ||
androidXMLFiles.includes('android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml') | ||
).toBe(true) | ||
expect( | ||
androidXMLFiles.includes('android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml') | ||
).toBe(true) | ||
|
||
const adaptiveLauncherIconContents = readFile( | ||
'android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml' | ||
) | ||
|
||
expect(adaptiveLauncherIconContents).toContain('adaptive-icon') | ||
|
||
const drawableBackgroundContents = readFile( | ||
'android/app/src/main/res/drawable/ic_launcher_background.xml' | ||
) | ||
const drawableForegroundContents = readFile( | ||
'android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml' | ||
) | ||
|
||
expect(drawableBackgroundContents).toContain('<vector') | ||
expect(drawableBackgroundContents).toContain('<?xml') | ||
|
||
expect(drawableForegroundContents).toContain('<vector') | ||
expect(drawableForegroundContents).toContain('<?xml') | ||
}) | ||
|
||
test('Detects file type from name.', () => { | ||
expect(getFileType('image/my-image.svg')).toBe('svg') | ||
expect(getFileType('another/path/somevectordrawable.xml')).toBe('xml') | ||
expect(getFileType('/Absolute/path/somevectordrawable.xml')).toBe('xml') | ||
expect(getFileType('./relative/path/some-svg.svg')).toBe('svg') | ||
}) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters