Icon file name could be referenced in the website

[M-ZubairAhmed]

Awesome work on the library, we have started using this as npm package.
We are currently rendering the icons directly in our react app via webpack svg loader that mean this is how we are importing

import IconGearFill from 'bootstrap-icons/icons/gear-fill.svg'

I was wondering if it would be a good idea to have a link in the view of the icon page referencing the icon in the github repo. Just below tag line.

Let me know your thoughts, i would be happy to send a PR :)

[mdo]

Adding it below the title could be a nice touch. I’ve opened #349 to change the humanized icon name on the homepage to the regular file name as well. Echoing the filename as Filename: above Tags: might be the best spot for now?

[M-ZubairAhmed]

Hi @mdo great, would you like me to do some contribution ?

[M-ZubairAhmed]

Can having a copy button be a good idea too ?

[yuki-93]

Hi @M-ZubairAhmed,
do you have a kind of howto for your setup? How do you include the bootstrap-icons with webpack-svg. I haven't worked with that before.

I am rendering stars in a questionnaire, where the user can click on stars to rate. I now want to include them and then use it as react component.

Thanks for your help.

For general styling I use react-bootstrap: https://github.com/react-bootstrap/react-bootstrap

[M-ZubairAhmed]

@yuki-93 Yes we basically use a svg loader in our webpack setup, follow here https://react-svgr.com/docs/webpack/#usage

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

and then directly import the svg as react components

import IconGearFill from 'bootstrap-icons/icons/gear-fill.svg'

for styling i pass on props on to the object and webpack loaders apply the transformation accordingly

<IconGearFill className="text-success" style={{ fontSize: '1.8em' }} />

[yuki-93]

@M-ZubairAhmed Thanks for your quick reply. I also figured out, that create-react-app does the webpack magic for you. So you can simply import { ReactComponent as StarFill } from 'bootstrap-icons/icons/star-fill.svg';.
Maybe this is a also an option to you, if you didn't ejected create-react-app.

Maybe the use of react should be documented in the docs. Should this go into a new issue or could be done here? @mdo

[M-ZubairAhmed]

@yuki-93 your welcome, yes we use custom webpack setup for our app.

[yuki-93]

I quickly wrapped all together in a short blog-post https://yuki-93.gitlab.io/aboutme/tech/bootstrap-icons-with-react/. Feel free to use or copy this on your docs page.

[M-ZubairAhmed]

haha this is great @yuki-93. Makes me want to write short one for custom webpack setup 😛

[yuki-93]

If you throw me over your markdown, I add this to the page and link your GitHub profile :)

[M-ZubairAhmed]

If the app uses custom webpack configuration, then loader is needed to handle svgs in your app. Lets use SVGR webpack loader.

yarn add @svgr/webpack --dev

and then in your webpack config file add the following rule :

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

and then directly import the svg as react components

import IconGearFill from 'bootstrap-icons/icons/gear-fill.svg'

for styling you can pass on style or classname prop, and they will be applied on to your svg component.

<IconGearFill className="text-success" style={{ fontSize: '1.8em' }} />

here is the markdown https://gist.githubusercontent.com/M-ZubairAhmed/4ada48d6658ffc24cde39c0568aa2d68/raw/3fbcc2279176dd699f6efc834aed6a99b5af3f52/react-bootstrap-icons.md

[yuki-93]

@M-ZubairAhmed There it is online https://yuki-93.gitlab.io/aboutme/tech/bootstrap-icons-with-react/

[mdo]

Catching up after being out for vacation, I'd love to come back to this and add a guide for this into the Icons docs, too. Appreciate all the details and steps here! <3

[erickriva]

I'm adapting the icons to React components, to import them like import {AlarmFill} from "package-name" and use like <AlarmFill color="white"/>, on a few days it will be ready to use... do you guys think will be easier to import and use like this?

[yuki-93]

@erickriva Thanks for your work. Before I found the solution I'm using now (import-as), I was looking for a way like yours. Also the color feature is nice, as I'm using custom CSS classes here and of course the way of multiple imports at once. In my current setup, I have to import from the path of one svg icon.

[erickriva]

@yuki-93 do you think it is necessary, for those who use it, to change all the SVG attributes or just a specific list like "width, height, fill, style and className"?

[M-ZubairAhmed]

@erickriva thats is nice recomendation, yes its good the default attributes can be changed.
My only concern with named imports is not configuring app for proper tree shaking will importing the whole module.

I usually try to import

import ModA from 'package/modA'

rather than

import {ModA} from 'paclage'

let me know your thoughts

[yuki-93]

@erickriva For me className and color would be enough, as the size is the normal textsize, as I use the icons inline with text. But of course exposing all attributes is nice for other devs.

[erickriva]

@M-ZubairAhmed I'm reading about "tree shaking" to see what i can do about this. I never thought about it, it's a good thing to try for sure.
I think import {Alarm, AlarmFill} from 'package' is better, easy to get only one icon but also for get multi icons.
Don't you think that multi lines for multi icons give a bigger complexity?

[erickriva]

@M-ZubairAhmed I found this repository right now.
https://github.com/ismamz/react-bootstrap-icons/.
The exact same idea. Could you give your thoughts about it?

[M-ZubairAhmed]

@erickriva yes i have seen this library :) i think this is a good library, you can use it as it is.

Regarding the multi lines import, as i said if you have configured your app properly to do tree shaking and dead code elimination you should be able to either of the import approach. https://webpack.js.org/guides/tree-shaking/

[mdo]

Updated docs went out with v1.2.0 and include more names and snippets of HTML to copy-paste. Hope that helps!