-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom Icons #931
Comments
These two are actually equivalent: <Icon name='user' />
<i class="user icon"></i> The component renders down to the HTML, so at the end of the day elements in a Semantic-UI-React app are just plain HTML and CSS. As you've noted, CSS would be the only way to change the icons. You would load your own font face and override the class names to use your new icons. If you're asking, "How can I add new icon names to the list of validated icon names?" then the answer is, you cannot. The list is fixed from the supported list of core SUI icon names. LMK if you have any further issues. |
See #955 on how to use custom icon names without warnings, namely like so: <Icon className="my-custom-icon-name" />
<Button icon={{ className: 'my-custom-icon-name' }} /> In response to OP, you can use any icon font you want or easily build a custom icon font with Fontello and then either edit the icon names in that tool to match SUI or just use custom names via i.icon{
font-family: fontello;
}
i.icon.custom-icon-name:before { content: '\e800'; } For extra performance, you can even embed the whole thing in your initial HTML response if you only use a handful of icons: @font-face {
font-family: 'fontello';
src: url('data:application/octet-stream;base64,d0........RgABA') format('woff'),
} |
Now with the latest version of semantic ui react and typescript having to type the icon name props as SemanticICONS feels wierd whereas previously passing a string with the icon name felt more flexible seeing as you can't directly call the enum SemanticICONS. Is there a cleaner way to do this at present? Thanks |
@owlyowl if you are using custom icons I would recommend NOT using the
|
Awesome thanks Brian! Done!
…On 15 Dec. 2017 5:50 am, "Brian Espinosa" ***@***.***> wrote:
@owlyowl <https://github.com/owlyowl> if you are using custom icons I
would recommend NOT using the name prop unless your icons have exactly
the same CSS names as they ship with in SUI core. I recommend that you use
className instead. In the example below, both of these render the same
markup.
// Both of these:
<Icon name='user' />
<Icon className='user' />
// Render this:
<i class="icon user"></i>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#931 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AB0-CqJfztefgYI7Qb4yGpbBqlqgdEwbks5tAW33gaJpZM4K6r3U>
.
|
Future users see: FAQ - Can I use custom icons? |
Is there a good method to add custom icons? I know I could use Icon.less overrides, but I would like to use them with the
Icon
component. It looks like the icon references are from a static list in theSUI.js
file. Is there a way to import a different list of icons from a different icon font?The text was updated successfully, but these errors were encountered: