英文:
Create class for svg icons to use it in blazor projects
问题
我已从svgrepo网站下载了一些.svg文件。我想在mudblazor项目中使用它们，并指定类名。
<MudIconButton Icon="@Icons.Material.Filled.Share" Disabled="true" aria-label="share"></MudIconButton>
从svgrepo下载的SVG图标：
<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M789.333333 832H234.666667l-128 128V234.666667c0-70.4 57.6-128 128-128h554.666666c70.4 0 128 57.6 128 128v469.333333c0 70.4-57.6 128-128 128z" fill="#009688" />
<path d="M512 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" />
<path d="M725.333333 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" />
<path d="M298.666667 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" />
</svg>
我想要使用从svgrepo网站下载的SVG图标，像这样：Icon="@Mydownloadedicon"，您可以如何实现它？
由于我没有找到任何资源，所以无法尝试任何方法。
英文:
I have downloaded some .svg files from svgrepo website. I want to use them in mudblazor project with the class name.
<MudIconButton Icon="@Icons.Material.Filled.Share" Disabled="true" aria-label="share"> </MudIconButton>
Svg icon downloaded from svgrepo
<svg width="800px" height="800px" viewBox="0 0 1024 1024"
class="icon" version="1.1"
xmlns="http://www.w3.org/2000/svg"><path d="M789.333333
832H234.666667l-128
128V234.666667c0-70.4 57.6-128 128-128h554.666666c70.4 0 128 57.6
128 128v469.333333c0
70.4-57.6 128-128 128z" fill="#009688" /><path d="M512 469.333333m-
64 0a64 64 0 1 0 128 0
64 64 0 1 0-128 0Z" fill="#FFFFFF" /><path d="M725.333333
469.333333m-64 0a64 64 0 1 0
128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" /><path d="M298.666667
469.333333m-64 0a64 64 0
1 0 128 0 64 64 0 1 0-128 0Z" fill="#FFFFFF" /></svg>
I want to use the SVG icon I download from the svgrepo site Like Icon="@Mydownloadedicon"
how can I implement it?
Haven't found any rescources, so I wasn't able to try anything.
答案1
得分: 1
以下是要翻译的内容：
这里有两种实现方法。
- 创建一个包含
SVG内容的字符串，然后将其添加到图标中。
<MudIcon Icon="@cube" Color="Color.Primary" />
@code{
const string cube = @"<svg style=""width:24px;height:24px"" viewBox=""0 0 24 24"">
<path fill=""currentColor"" d=""M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z" />
";
}
2. 创建一个单独的 Razor 组件来渲染 SVG 内容。然后，您可以简单地导入并使用该组件。
查看这两种方法演示的代码片段。
[MudBlazor 代码片段](https://try.mudblazor.com/snippet/wOGRETwThOmXvmnu)
<details>
<summary>英文:</summary>
Here's two ways you can implement this.
1. Create a string with the `SVG` content and add that to the Icon.
<MudIcon Icon="@cube" Color="Color.Primary" />
@code{
const string cube = @"<svg style=""width:24px;height:24px"" viewBox=""0 0 24 24"">
<path fill=""currentColor"" d=""M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"" />
</svg>";
}
2. Create a separate razor component which renders the SVG content. Then you can simply import and use that component.
Have a look at snippet for both methods demos.
[MudBlazor snippet](https://try.mudblazor.com/snippet/wOGRETwThOmXvmnu)
</details>
# 答案2
**得分**: 1
从SVG中移除`width`和`height`属性，并创建如下类：
```csharp
public class MyIcons
{
public const string CustomIcon = "<svg viewBox=\"0 0 1024 1024\" class=\"icon\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M789.333333 832H234.666667l-128 128V234.666667c0-70.4 57.6-128 128-128h554.666666c70.4 0 128 57.6 128 128v469.333333c0 70.4-57.6 128-128 128z\" fill=\"#009688\" /><path d=\"M512 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z\" fill=\"#FFFFFF\" /><path d=\"M725.333333 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z\" fill=\"#FFFFFF\" /><path d=\"M298.666667 469.333333m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z\" fill=\"#FFFFFF\" /></svg>";
}
然后像这样使用：
<MudIconButton Icon="@MyIcons.CustomIcon" Disabled="true" aria-label="share"/>
英文:
remove width and height attribute from svg and Create Class as follows:
public class MyICons
{
public const string CustomIcon = "<svg viewBox=\"0 0 1024 1024\" \r\nclass=\"icon\" version=\"1.1\" \r\nxmlns=\"http://www.w3.org/2000/svg\"><path d=\"M789.333333 \r\n832H234.666667l-128 \r\n128V234.666667c0-70.4 57.6-128 128-128h554.666666c70.4 0 128 57.6 \r\n128 128v469.333333c0 \r\n70.4-57.6 128-128 128z\" fill=\"#009688\" /><path d=\"M512 469.333333m- \r\n64 0a64 64 0 1 0 128 0 \r\n64 64 0 1 0-128 0Z\" fill=\"#FFFFFF\" /><path d=\"M725.333333 \r\n469.333333m-64 0a64 64 0 1 0 \r\n128 0 64 64 0 1 0-128 0Z\" fill=\"#FFFFFF\" /><path d=\"M298.666667 \r\n469.333333m-64 0a64 64 0 \r\n1 0 128 0 64 64 0 1 0-128 0Z\" fill=\"#FFFFFF\" /></svg>";
}
and use like this :
<MudIconButton Icon="@MyICons.CustomIcon" Disabled="true" aria-label="share"/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论