What problem does this feature solve?

This feature will allow set color for the mask-icon in safari. @vue/cli-plugin-pwa sets this icon to the color of the main theme now. Often it is necessary to specify a mask-icon color different from the theme color. A good example is the twitter PWA in which the main theme is white (#ffffff) and the icon is the company color blue (#1da1f2).

This feature have not any good solution now. Safari ignores fill color defined in svg path.

Only sed on the result of build can help.

What does the proposed API look like?

pwa: { themeColor: '#ffffff', maskIconColor: '#1da1f2' }

which would generate

<meta name="theme-color" content="#ffffff" /> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1da1f2">