Skip to content

Rewrite on icon article#665

Merged
adegeo merged 7 commits intomainfrom
adegeo-611-icon
Jul 1, 2022
Merged

Rewrite on icon article#665
adegeo merged 7 commits intomainfrom
adegeo-611-icon

Conversation

@adegeo
Copy link
Copy Markdown
Contributor

@adegeo adegeo commented Jun 29, 2022

Rewrite the icon article to describe the various settings and platform-specific information.

Fixes #628
Fixes #611

internal preview

@adegeo adegeo requested review from davidbritch and mattleibow June 29, 2022 23:57
@adegeo adegeo marked this pull request as ready for review June 29, 2022 23:57
@mattleibow
Copy link
Copy Markdown
Member

mattleibow commented Jun 30, 2022

iOS and Mac Catalyst do also need changes to the Info.plist. There should be a place near the bottom in the template file with a appicon.xsassets or something. This is like android and is just the extension less filename.

https://github.com/dotnet/maui/blob/ce3069d3b9c9a34d7f386feff6a157ef145a9640/src/Templates/src/templates/maui-mobile/Platforms/MacCatalyst/Info.plist#L28

@adegeo
Copy link
Copy Markdown
Contributor Author

adegeo commented Jun 30, 2022

@mattleibow Ahhh ok! I totally didn't spot that in the file.

Copy link
Copy Markdown
Contributor

@davidbritch davidbritch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved so you're unblocked, but with comments.

Love the graphic :D

> [!NOTE]
> An app icon can also be added to other folders of your app project. However, in this scenario its build action must be manually set to **MauiIcon** in the **Properties** window.
> [!IMPORTANT]
> You can specify the icon in Visual Studio by using the **Solution Explorer** pane. First, select the file, then in the **Properties** pane, set the **Build Action** to **MauiIcon**. Be careful though, your this adds an additional icon to your project file without removing the previous icon. Only the first `<MauiIcon>` item defined by the project file is respected. It's generally easier to manually specify the icon in the project file, or by simply replacing the _appicon.svg_ file that is created by the project template.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I disagree with the bit about it being easier to specify the icon in the .csproj file. I think it's easier to (1) delete existing icon, (2) drag new icon in. Then you don't need to set the build action, or edit the .csproj. I'd always opt to do that.

I think it's important to mention that dragging the new icon in is an option (to avoid having to set the build action yourself).

Copy link
Copy Markdown
Contributor Author

@adegeo adegeo Jul 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I drag in a new icon, it doesn't set the build action for me. I tried png and svg files.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm altering this paragraph to remove my opinion about hand editing the file 😁

> [!IMPORTANT]
> You can specify the icon in Visual Studio by using the **Solution Explorer** pane. First, select the file, then in the **Properties** pane, set the **Build Action** to **MauiIcon**. Be careful though, your this adds an additional icon to your project file without removing the previous icon. Only the first `<MauiIcon>` item defined by the project file is respected. It's generally easier to manually specify the icon in the project file, or by simply replacing the _appicon.svg_ file that is created by the project template.

After changing the icon, by either changing the content of the image resources or by specifying a new image resource file, you may need to clean the project in Visual Studio. To clean the project, right-click on the project file in the **Solution Explorer** pane, and select **Clean**. You also may need to uninstall the app from the target platform you're testing with.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think "changing the content of the image resources or by specifying a new image resource file" could be clearer. Maybe spell it out? Something like "After changing the icon, by either replacing the existing app icon or by adding a new app icon, ..."?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I'm going to remove that clause completely. I don't think it adds value. Now it will simply be:

After changing the icon file, .....

The app icon defined by your .NET MAUI app is used to generate an asset catalog icon set for both iOS and macOS platforms. The name of the icon set is defined in the plist file, which on iOS is located at _Platforms\\iOS\\Info.plist_. For macOS, the plist file is located at _Platforms\\MacCatalyst\\Info.plist_.

> [!TIP]
> To edit the plist file in Visual Studio, the plist editor presented when you double click on the plist file may not work. You may need to right-click the file in the **Solution Explorer** pane, and select **Open With...**. Next, choose **XML (Text) Editor** and select **OK**.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this could be rephrased so that it's not explicitly calling out that double clicking might not open the editor? I just tried it and the editor opened first time. Personally I'd say something like as well as opening the file in the plist editor you can also open it in the XML editor by XYZ.

Copy link
Copy Markdown
Contributor Author

@adegeo adegeo Jul 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For me iOS editor opens up, but the MacCatalyst editor doesn't. It just spins indefinitely. And in the editor itself, these settings aren't available. 😆

But I'll change it to remove why they need to edit it by hand and just suggest that they do.

@adegeo adegeo merged commit 7989e4a into main Jul 1, 2022
@adegeo adegeo deleted the adegeo-611-icon branch July 1, 2022 20:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

More documentation please MauiIcon documentation is incomplete

3 participants