WordPressのブロック開発メモ その4ー1 アイコン一覧

とりあえず調べた@wordpress/iconsのアイコン一覧です。
増えたり減ったり、変更がある可能性があります。
他にもある可能性もあります。

addCard, addSubmenu, addTemplate, alignCenter, alignJustify
alignLeft, alignNone, alignRight, archive, arrowDown
arrowLeft, arrowRight, arrowUp, aspectRatio, atSymbol
audio, backup, blockDefault, blockMeta, blockTable
border, box, brush, bug, button
buttons, calendar, cancelCircleFilled, caption, capturePhoto
captureVideo, category, chartBar, check, chevronDown
chevronLeft, chevronLeftSmall, chevronRight, chevronRightSmall, chevronUp
chevronUpDown, classic, close, closeSmall, cloud
cloudUpload, code, cog, color, column
columns, comment, commentAuthorAvatar, commentAuthorName, commentContent
commentEditLink, commentReplyLink, copy, cover, create
crop, currencyDollar, currencyEuro, currencyPound, customLink
customPostType, desktop, download, dragHandle, drawerLeft
drawerRight, edit, external, file, filter
flipHorizontal, flipVertical, footer, formatBold, formatCapitalize
formatIndent, formatIndentRTL, formatItalic, formatListBullets, formatListBulletsRTL
formatListNumbered, formatListNumberedRTL, formatLowercase, formatLtr, formatOutdent
formatOutdentRTL, formatRtl, formatStrikethrough, formatUnderline, formatUppercase
fullscreen, gallery, globe, grid, group
handle, header, heading, help, helpFilled
home, html, image, inbox, info
insertAfter, insertBefore, institution, justifyCenter, justifyLeft
justifyRight, justifySpaceBetween, justifyStretch, key, keyboardClose
keyboardReturn, layout, lifesaver, lineDashed, lineDotted
lineSolid, link, linkOff, list, listItem
listView, lock, lockOutline, lockSmall, login
loop, mapMarker, media, mediaAndText, megaphone
menu, mobile, more, moreHorizontal, moreHorizontalMobile
moreVertical, moveTo, navigation, next, notFound
overlayText, page, pageBreak, pages, paragraph
payment, pencil, people, percent, pin
plugins, plus, plusCircle, plusCircleFilled, positionCenter
positionLeft, positionRight, post, postAuthor, postCategories
postComments, postCommentsCount, postCommentsForm, postContent, postDate
postExcerpt, postFeaturedImage, postList, postTerms, preformatted
previous, pullLeft, pullRight, pullquote, queryPagination
queryPaginationNext, queryPaginationNumbers, queryPaginationPrevious, quote, receipt
redo, removeBug, removeSubmenu, replace, reset
resizeCornerNE, reusableBlock, rotateLeft, rotateRight, row
rss, search, seen, separator, settings
shadow, share, shield, shipping, shortcode
shuffle, sidebar, siteLogo, stack, starEmpty
starFilled, starHalf, store, stretchFullWidth, stretchWide
styles, subscript, superscript, swatch, symbol
symbolFilled, table, tableColumnAfter, tableColumnBefore, tableColumnDelete
tableRowAfter, tableRowBefore, tableRowDelete, tablet, tag
termDescription, textColor, tip, title, tool
trash, trendingDown, trendingUp, typography, undo
ungroup, unlock, update, upload, verse
video, warning, widget, wordpress

一度表示してみましょう。

import React from 'react';
import KurageExampleBlockProps from './props';
import './editor.scss';
import { useBlockProps } from '@wordpress/block-editor';
import { BlockEditProps } from '@wordpress/blocks';
import { Icon } from '@wordpress/components';

import { addCard,addSubmenu,addTemplate,alignCenter,alignJustify,alignLeft,alignNone,alignRight,archive,arrowDown,arrowLeft,arrowRight,arrowUp,aspectRatio,atSymbol,audio,backup,blockDefault,blockMeta,blockTable,border,box,brush,bug,button,buttons,calendar,cancelCircleFilled,caption,capturePhoto,captureVideo,category,chartBar,check,chevronDown,chevronLeft,chevronLeftSmall,chevronRight,chevronRightSmall,chevronUp,chevronUpDown,classic,close,closeSmall,cloud,cloudUpload,code,cog,color,column,columns,comment,commentAuthorAvatar,commentAuthorName,commentContent,commentEditLink,commentReplyLink,copy,cover,create,crop,currencyDollar,currencyEuro,currencyPound,customLink,customPostType,desktop,download,dragHandle,drawerLeft,drawerRight,edit,external,file,filter,flipHorizontal,flipVertical,footer,formatBold,formatCapitalize,formatIndent,formatIndentRTL,formatItalic,formatListBullets,formatListBulletsRTL,formatListNumbered,formatListNumberedRTL,formatLowercase,formatLtr,formatOutdent,formatOutdentRTL,formatRtl,formatStrikethrough,formatUnderline,formatUppercase,fullscreen,gallery,globe,grid,group,handle,header,heading,help,helpFilled,home,html,image,inbox,info,insertAfter,insertBefore,institution,justifyCenter,justifyLeft,justifyRight,justifySpaceBetween,justifyStretch,key,keyboardClose,keyboardReturn,layout,lifesaver,lineDashed,lineDotted,lineSolid,link,linkOff,list,listItem,listView,lock,lockOutline,lockSmall,login,loop,mapMarker,media,mediaAndText,megaphone,menu,mobile,more,moreHorizontal,moreHorizontalMobile,moreVertical,moveTo,navigation,next,notFound,overlayText,page,pageBreak,pages,paragraph,payment,pencil,people,percent,pin,plugins,plus,plusCircle,plusCircleFilled,positionCenter,positionLeft,positionRight,post,postAuthor,postCategories,postComments,postCommentsCount,postCommentsForm,postContent,postDate,postExcerpt,postFeaturedImage,postList,postTerms,preformatted,previous,pullLeft,pullRight,pullquote,queryPagination,queryPaginationNext,queryPaginationNumbers,queryPaginationPrevious,quote,receipt,redo,removeBug,removeSubmenu,replace,reset,resizeCornerNE,reusableBlock,rotateLeft,rotateRight,row,rss,search,seen,separator,settings,shadow,share,shield,shipping,shortcode,shuffle,sidebar,siteLogo,stack,starEmpty,starFilled,starHalf,store,stretchFullWidth,stretchWide,styles,subscript,superscript,swatch,symbol,symbolFilled,table,tableColumnAfter,tableColumnBefore,tableColumnDelete,tableRowAfter,tableRowBefore,tableRowDelete,tablet,tag,termDescription,textColor,tip,title,tool,trash,trendingDown,trendingUp,typography,undo,ungroup,unlock,update,upload,verse,video,warning,widget,wordpress } from '@wordpress/icons';

const iconObj = {
    addCard,addSubmenu,addTemplate,alignCenter,alignJustify,alignLeft,alignNone,alignRight,archive,arrowDown,arrowLeft,arrowRight,arrowUp,aspectRatio,atSymbol,audio,backup,blockDefault,blockMeta,blockTable,border,box,brush,bug,button,buttons,calendar,cancelCircleFilled,caption,capturePhoto,captureVideo,category,chartBar,check,chevronDown,chevronLeft,chevronLeftSmall,chevronRight,chevronRightSmall,chevronUp,chevronUpDown,classic,close,closeSmall,cloud,cloudUpload,code,cog,color,column,columns,comment,commentAuthorAvatar,commentAuthorName,commentContent,commentEditLink,commentReplyLink,copy,cover,create,crop,currencyDollar,currencyEuro,currencyPound,customLink,customPostType,desktop,download,dragHandle,drawerLeft,drawerRight,edit,external,file,filter,flipHorizontal,flipVertical,footer,formatBold,formatCapitalize,formatIndent,formatIndentRTL,formatItalic,formatListBullets,formatListBulletsRTL,formatListNumbered,formatListNumberedRTL,formatLowercase,formatLtr,formatOutdent,formatOutdentRTL,formatRtl,formatStrikethrough,formatUnderline,formatUppercase,fullscreen,gallery,globe,grid,group,handle,header,heading,help,helpFilled,home,html,image,inbox,info,insertAfter,insertBefore,institution,justifyCenter,justifyLeft,justifyRight,justifySpaceBetween,justifyStretch,key,keyboardClose,keyboardReturn,layout,lifesaver,lineDashed,lineDotted,lineSolid,link,linkOff,list,listItem,listView,lock,lockOutline,lockSmall,login,loop,mapMarker,media,mediaAndText,megaphone,menu,mobile,more,moreHorizontal,moreHorizontalMobile,moreVertical,moveTo,navigation,next,notFound,overlayText,page,pageBreak,pages,paragraph,payment,pencil,people,percent,pin,plugins,plus,plusCircle,plusCircleFilled,positionCenter,positionLeft,positionRight,post,postAuthor,postCategories,postComments,postCommentsCount,postCommentsForm,postContent,postDate,postExcerpt,postFeaturedImage,postList,postTerms,preformatted,previous,pullLeft,pullRight,pullquote,queryPagination,queryPaginationNext,queryPaginationNumbers,queryPaginationPrevious,quote,receipt,redo,removeBug,removeSubmenu,replace,reset,resizeCornerNE,reusableBlock,rotateLeft,rotateRight,row,rss,search,seen,separator,settings,shadow,share,shield,shipping,shortcode,shuffle,sidebar,siteLogo,stack,starEmpty,starFilled,starHalf,store,stretchFullWidth,stretchWide,styles,subscript,superscript,swatch,symbol,symbolFilled,table,tableColumnAfter,tableColumnBefore,tableColumnDelete,tableRowAfter,tableRowBefore,tableRowDelete,tablet,tag,termDescription,textColor,tip,title,tool,trash,trendingDown,trendingUp,typography,undo,ungroup,unlock,update,upload,verse,video,warning,widget,wordpress
}

const IconList = Object.entries(iconObj);

function *cut<T>(arr: T[], line: number)
{
    const copy = [...arr];
    while(copy.length)
    {
        yield copy.splice(0, line);
    }
}

const lineIconList = [...cut(IconList, 9)];
const widthStyle = { width: 220, borderWidth: 1, borderStyle: 'solid', borderColor: "#fcc", margin: 2, display: 'inline-block' };

export default (props: BlockEditProps<KurageExampleBlockProps>) =>
{
    return (
        <div {...useBlockProps()}>
            {
                lineIconList.map(line => {
                    return (
                        <div>
                            {
                                line.map(([name, icon]) => (<span style={widthStyle}><Icon icon={icon} />: {name}</span>))
                            }
                        </div>
                    )
                })
            }
        </div>
    );
}

BlockEditor certificate css DataGrid Docker Gutenberg Hyper-V iframe MUI openssl PHP React ReduxToolkit REST ubuntu WordPress オレオレ認証局 フレームワーク