Blazor.ECharts

To use Open Iconic as an icon font within a Bootstrap project, include the Bootstrap-specific stylesheet and use the oi class prefix followed by the icon name.

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

The SVG sprite allows you to load all icons in a single request. To use an icon, use an <svg> tag with a <use> element pointing to the sprite ID.

Styling Tips:

• Sizing: Set equal width and height on the <svg> tag.
• Coloring: Use the CSS fill property on the <use> tag.
• Best Practice: Add a general class to the <svg> tag and a unique class to the <use> tag for easier styling.

<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

<style>
.icon {
  width: 16px;
  height: 16px;
}

.icon-account-login {
  fill: #f00;
}
</style>

Open Iconic provides an SVG sprite that allows you to load all icons in a single request. To use it, embed an <svg> tag containing a <use> element that references the specific icon ID within the sprite file.

Styling

• Sizing: Set equal width and height on the <svg> tag.
• Coloring: Use the CSS fill property on the <use> tag to change the icon color.

Tip: Add a general class to the <svg> tag for shared styles and a unique class to the <use> tag for icon-specific styling.

<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

/* Sizing */
.icon {
  width: 16px;
  height: 16px;
}

/* Coloring */
.icon-account-login {
  fill: #f00;
}

You can display Open Iconic icons as standard SVG images. This is recommended for simplicity and follows standard image usage patterns. Always remember to include an alt attribute for accessibility.

<img src="/open-iconic/svg/icon-name.svg" alt="icon name">

To enable the WordCloud functionality, you must include the echarts-wordcloud.min.js script in the <head> section of your wwwroot/index.html file. The script is provided via the package's static assets.

<script src="_content/Blazor.ECharts.WordCloud/echarts-wordcloud.min.js"></script>

To use the WordCloud component, you must first have Blazor.ECharts installed and configured in your project. This component is a Blazor wrapper based on the echarts-wordcloud library.

<!-- Ensure Blazor.ECharts is already set up in your project before adding WordCloud -->

To use Open Iconic as an icon font within a Foundation project, include the Foundation-specific stylesheet and use the fi- class prefix followed by the icon name.

<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">

<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>

If you intend to use map-related features (such as Baidu Maps integration), you must manually add the necessary map JS references to the <head> of your wwwroot/index.html file. This typically includes the Baidu Map API and the ECharts BMap extension.

<!-- Add to <head> in wwwroot/index.html -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=[Your Key Here]"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>

To use Open Iconic as an icon font without Bootstrap or Foundation, include the default stylesheet and use the oi class with the data-glyph attribute to specify the icon name.

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">

<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

Since components require explicit dimensions, use CSS to manage layouts. The following examples demonstrate how to create a flexible container and specific chart sizes as seen in the project demos.

/* Container for multiple charts */
.chart-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-right: 0px;
    padding-top: 0px;
    height: 95%;
    width: 95%;
}

/* Standard sized chart */
.chart-normal {
    border-radius: 4px;
    height: 300px;
    width: 400px;
    margin-top: 20px;
}

/* Full width/height chart */
.chart-fill {
    width: 100%;
    height: 720px;
    margin-top: 20px;
    margin-right: 20px;
}