Blazor + Ant Design + .NET 5快速开发框架（8）Ant Design Icon图标库

前言

icon可以使网站一目了然，在网站中假如一个可以直接选择图标的blazor组件，由于Ant Design没提供可以直接显示图标的组件，这里打算自己弄一个，方式是把所有的icon名称拷贝下来，然后遍历显示就可以。

爬网站

我的用方式简单粗暴，直接ctrl+s把页面保存下来，然后利用正则提取。

正则表达式：<span class=\"ant-badge\" id=\"(.*?)\" _bl_(.*?)=\"\">(.*?)</span>

亲测好用，一共是420个图标，以后就算想拓展，直接假如新的图标名称即可。

然后看下效果：

很好，效果是实现了，但是打开时候和选择时候有些卡顿，后面弄个滚动加载就完美了。

代码

<div class="panel-body" style="height: 400px; overflow-y:scroll">
    <div style="border: 1px  #000000; width: 90%; margin: 0 auto;">
        <RadioGroup @bind-Value="radioValue" Size="large">
            @foreach (var item in IconList)
            {
        <Radio RadioButton Value="@(item)">
            <Tooltip Title="@item">
                <Icon Type="@item" Theme="outline" />
            </Tooltip>
        </Radio>}
        </RadioGroup>
    </div>
</div>



@code{
    string radioValue = "";


    string[] IconList = new string[]
    {
        "step-backward","step-forward","fast-backward","fast-forward","shrink","arrows-alt","down","up","left","right","caret-up","caret-down","caret-left","caret-right","up-circle","down-circle","left-circle","right-circle","double-right","double-left","vertical-left","vertical-right","vertical-align-top","vertical-align-middle","vertical-align-bottom","forward","backward","rollback","enter","retweet","swap","swap-left","swap-right","arrow-up","arrow-down","arrow-left","arrow-right","play-circle","up-square","down-square","left-square","right-square","login","logout","menu-fold","menu-unfold","border-bottom","border-horizontal","border-inner","border-outer","border-left","border-right","border-top","border-verticle","pic-center","pic-left","pic-right","radius-bottomleft","radius-bottomright","radius-upleft","radius-upright","fullscreen","fullscreen-exit","question","question-circle","plus","plus-circle","pause","pause-circle","minus","minus-circle","plus-square","minus-square","info","info-circle","exclamation","exclamation-circle","close","close-circle","close-square","check","check-circle","check-square","clock-circle","warning","issues-close","stop","edit","form","copy","scissor","delete","snippets","diff","highlight","align-center","align-left","align-right","bg-colors","bold","italic","underline","strikethrough","redo","undo","zoom-in","zoom-out","font-colors","font-size","line-height","dash","small-dash","sort-ascending","sort-descending","drag","ordered-list","unordered-list","radius-setting","column-width","area-chart","pie-chart","bar-chart","dot-chart","line-chart","radar-chart","heat-map","fall","rise","stock","box-plot","fund","sliders","android","apple","windows","ie","chrome","github","aliwangwang","dingding","weibo-square","weibo-circle","taobao-circle","html5","weibo","twitter","wechat","youtube","alipay-circle","taobao","skype","qq","medium-workmark","gitlab","medium","linkedin","google-plus","dropbox","facebook","codepen","code-sandbox","amazon","google","codepen-circle","alipay","ant-design","ant-cloud","aliyun","zhihu","slack","slack-square","behance","behance-square","dribbble","dribbble-square","instagram","yuque","alibaba","yahoo","reddit","sketch","account-book","aim","alert","apartment","api","appstore","appstore-add","audio","audio-muted","audit","bank","barcode","bars","bell","block","book","border","borderless-table","branches","bug","build","bulb","calculator","calendar","camera","car","carry-out","ci","ci-circle","clear","cloud","cloud-download","cloud-server","cloud-sync","cloud-upload","cluster","code","coffee","column-height","comment","compass","compress","console-sql","contacts","container","control","copyright","copyright-circle","credit-card","crown","customer-service","dashboard","database","delete-column","delete-row","delivered-procedure","deployment-unit","desktop","dingtalk","disconnect","dislike","dollar","dollar-circle","download","ellipsis","environment","euro","euro-circle","exception","expand","expand-alt","experiment","export","eye","eye-invisible","field-binary","field-number","field-string","field-time","file","file-add","file-done","file-excel","file-exclamation","file-gif","file-image","file-jpg","file-markdown","file-pdf","file-ppt","file-protect","file-search","file-sync","file-text","file-unknown","file-word","file-zip","filter","fire","flag","folder","folder-add","folder-open","folder-view","fork","format-painter","frown","function","fund-projection-screen","fund-view","funnel-plot","gateway","gif","gift","global","gold","group","hdd","heart","history","home","hourglass","idcard","import","inbox","insert-row-above","insert-row-below","insert-row-left","insert-row-right","insurance","interaction","key","laptop","layout","like","line","link","loading","loading-3-quarters","lock","mac-command","mail","man","medicine-box","meh","menu","merge-cells","message","mobile","money-collect","monitor","more","node-collapse","node-expand","node-index","notification","number","one-to-one","paper-clip","partition","pay-circle","percentage","phone","picture","play-square","pound","pound-circle","poweroff","printer","profile","project","property-safety","pull-request","pushpin","qrcode","read","reconciliation","red-envelope","reload","rest","robot","rocket","rotate-left","rotate-right","safety","safety-certificate","save","scan","schedule","search","security-scan","select","send","setting","shake","share-alt","shop","shopping","shopping-cart","sisternode","skin","smile","solution","sound","split-cells","star","subnode","switcher","sync","table","tablet","tag","tags","team","thunderbolt","to-top","tool","trademark","trademark-circle","transaction","translation","trophy","ungroup","unlock","upload","usb","user","user-add","user-delete","user-switch","usergroup-add","usergroup-delete","verified","video-camera","video-camera-add","wallet","whats-app","wifi","woman"
        };



}

直接复制IconList就可以使用了。

项目地址