Skip to content

Commit c80ad50

Browse files
glsdowntcbegley
glsdown
and
tcbegley
committed
Add support for icons (#661)
* Added icon CDNs to py, jl and R * Added icon documentation * Changed to use new icon module * Added exampel of icon use in alert * Added new icon files for R and JL build * Format * Update fontawesome version * Move alert with icon doc example to icon page Co-authored-by: tcbegley <[email protected]>
1 parent 8f4fefe commit c80ad50

File tree

16 files changed

+449
-13
lines changed

16 files changed

+449
-13
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,10 @@ docs/examples/vendor
3030
# R build artifacts
3131
inst
3232
man
33-
R
33+
R/*
3434
DESCRIPTION
3535
NAMESPACE
36+
!R/icons.R
3637
!R/themes.R
3738

3839
# Julia build artifacts

‎R/icons.R‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#' @export'
2+
dbcIcons <- list(
3+
BOOTSTRAP = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css",
4+
FONT_AWESOME = "https://use.fontawesome.com/releases/v5.15.4/css/all.css"
5+
)

‎dash_bootstrap_components/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import os
33
import sys
44

5+
from dash_bootstrap_components import icons # noqa
56
from dash_bootstrap_components import themes # noqa
67
from dash_bootstrap_components import _components
78
from dash_bootstrap_components._components import * # noqa

‎dash_bootstrap_components/icons.py‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
BOOTSTRAP = (
2+
"https://cdn.jsdelivr.net/npm/[email protected]/"
3+
"font/bootstrap-icons.css"
4+
)
5+
FONT_AWESOME = "https://use.fontawesome.com/releases/v5.15.4/css/all.css"

‎docs/components_page/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@ def register_apps():
150150
"label": "Quickstart",
151151
},
152152
{"name": "themes", "href": "/docs/themes", "label": "Themes"},
153+
{"name": "icons", "href": "/docs/icons", "label": "Icons"},
153154
{"name": "faq", "href": "/docs/faq", "label": "FAQ"},
154155
{
155156
"name": "components",

‎docs/components_page/components/alert/icon.R‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
library(dashBootstrapComponents)
2+
library(dashHtmlComponents)
3+
4+
alerts <- htmlDiv(
5+
list(
6+
dbcAlert(
7+
list(
8+
htmlI(class_name = "bi bi-info-circle-fill me-2"),
9+
"An example info alert with an icon"
10+
),
11+
color = "info",
12+
class_name = "d-flex align-items-center"
13+
),
14+
dbcAlert(
15+
list(
16+
htmlI(class_name = "bi bi-check-circle-fill me-2"),
17+
"An example success alert with an icon"
18+
),
19+
color = "success",
20+
class_name = "d-flex align-items-center"
21+
),
22+
dbcAlert(
23+
list(
24+
htmlI(class_name = "bi bi-exclamation-triangle-fill me-2"),
25+
"An example warning alert with an icon"
26+
),
27+
color = "warning",
28+
class_name = "d-flex align-items-center"
29+
),
30+
dbcAlert(
31+
list(
32+
htmlI(class_name = "bi bi-x-octagon-fill me-2"),
33+
"An example danger alert with an icon"
34+
),
35+
color = "danger",
36+
class_name = "d-flex align-items-center"
37+
)
38+
)
39+
)

‎docs/components_page/components/alert/icon.jl‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
using DashBootstrapComponents, DashHtmlComponents
2+
3+
alerts = html_div([
4+
dbc_alert(
5+
[
6+
html_i(class_name = "bi bi-info-circle-fill me-2"),
7+
"An example info alert with an icon",
8+
],
9+
color = "info",
10+
class_name = "d-flex align-items-center",
11+
),
12+
dbc_alert(
13+
[
14+
html_i(class_name = "bi bi-check-circle-fill me-2"),
15+
"An example success alert with an icon",
16+
],
17+
color = "success",
18+
class_name = "d-flex align-items-center",
19+
),
20+
dbc_alert(
21+
[
22+
html_i(class_name = "bi bi-exclamation-triangle-fill me-2"),
23+
"An example warning alert with an icon",
24+
],
25+
color = "warning",
26+
class_name = "d-flex align-items-center",
27+
),
28+
dbc_alert(
29+
[
30+
html_i(class_name = "bi bi-x-octagon-fill me-2"),
31+
"An example danger alert with an icon",
32+
],
33+
color = "danger",
34+
class_name = "d-flex align-items-center",
35+
),
36+
])

‎docs/components_page/components/alert/icon.py‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import dash_bootstrap_components as dbc
2+
import dash_html_components as html
3+
4+
alerts = html.Div(
5+
[
6+
dbc.Alert(
7+
[
8+
html.I(class_name="bi bi-info-circle-fill me-2"),
9+
"An example info alert with an icon",
10+
],
11+
color="info",
12+
class_name="d-flex align-items-center",
13+
),
14+
dbc.Alert(
15+
[
16+
html.I(class_name="bi bi-check-circle-fill me-2"),
17+
"An example success alert with an icon",
18+
],
19+
color="success",
20+
class_name="d-flex align-items-center",
21+
),
22+
dbc.Alert(
23+
[
24+
html.I(class_name="bi bi-exclamation-triangle-fill me-2"),
25+
"An example warning alert with an icon",
26+
],
27+
color="warning",
28+
class_name="d-flex align-items-center",
29+
),
30+
dbc.Alert(
31+
[
32+
html.I(class_name="bi bi-x-octagon-fill me-2"),
33+
"An example danger alert with an icon",
34+
],
35+
color="danger",
36+
class_name="d-flex align-items-center",
37+
),
38+
]
39+
)

‎docs/content/docs/icons.md‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
---
2+
title: Icons
3+
---
4+
5+
# Icons
6+
7+
<p class="lead">Add icons to enhance your application.</p>
8+
9+
As with the [CSS stylesheets](/docs/themes), _dash-bootstrap-components_ doesn't come pre-bundled with icons. This is to give you the freedom to use any icon library of your choice.
10+
11+
There are a number of different icon libraries available, which you can link to via CDN, or serve locally depending on your needs. Details on how to link css can be found in the [themes](/docs/themes) documentation.
12+
13+
## Packaged CDN links
14+
15+
_dash-bootstrap-components_ contains CDN links for [Bootstrap Icons](https://icons.getbootstrap.com/) and [Font Awesome](https://fontawesome.com/), two libraries of icons you can use in your apps. You can use either of them by adding them to `external_stylesheets` when instantiating your app.
16+
17+
Bootstrap Icons was developed by the Bootstrap team specifically for use with Bootstrap. There is excellent documentation on how to use them on the [Bootstrap website](https://icons.getbootstrap.com/#usage), and a small example below.
18+
19+
Font Awesome is perhaps the most widely used icon library and is very commonly used with Bootstrap. Usage is similar to Bootstrap Icons, check [their documentation](https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use) for more details.
20+
21+
~~~bootstrap-tabs
22+
Python
23+
24+
Links are available in the `dash_bootstrap_components.icons` submodule.
25+
26+
```python
27+
import dash
28+
import dash_bootstrap_components as dbc
29+
30+
# For Bootstrap Icons...
31+
app = dash.Dash(
32+
external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
33+
)
34+
# Or for Font Awesome Icons...
35+
app = dash.Dash(
36+
external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
37+
)
38+
39+
```
40+
-----
41+
R
42+
43+
Links are available in the `dbcIcons` list which is added to your namespace when you import `dashBootstrapComponents`.
44+
45+
```r
46+
library(dash)
47+
library(dashBootstrapComponents)
48+
49+
# For Bootstrap Icons...
50+
app <- Dash$new(
51+
external_stylesheets = list(dbcThemes$BOOTSTRAP, dbcIcons$BOOTSTRAP)
52+
)
53+
# Or for Font Awesome Icons...
54+
app <- Dash$new(
55+
external_stylesheets = list(dbcThemes$BOOTSTRAP, dbcIcons$FONT_AWESOME)
56+
)
57+
```
58+
59+
-----
60+
Julia
61+
62+
Links are available as part of the `dbc_icons` named tuple available in `DashBootstrapComponents`.
63+
64+
```julia
65+
using Dash, DashBootstrapComponents
66+
67+
# For Bootstrap Icons...
68+
app = dash(
69+
external_stylesheets=[dbc_themes.BOOTSTRAP, dbc_icons.BOOTSTRAP]
70+
)
71+
# Or for Font Awesome Icons...
72+
app = dash(
73+
external_stylesheets=[dbc_themes.BOOTSTRAP, dbc_icons.FONT_AWESOME]
74+
)
75+
```
76+
~~~
77+
78+
## Example
79+
80+
This simple example adds Bootstrap Icons to some alerts.
81+
82+
~~~bootstrap-example-tabs
83+
<div>
84+
<div class="alert alert-info d-flex align-items-center">
85+
<i class="bi bi-info-circle-fill me-2"></i>
86+
An example info alert with an icon
87+
</div>
88+
<div class="alert alert-success d-flex align-items-center">
89+
<i class="bi bi-check-circle-fill me-2"></i>
90+
An example success alert with an icon
91+
</div>
92+
<div class="alert alert-warning d-flex align-items-center">
93+
<i class="bi bi-exclamation-triangle-fill me-2"></i>
94+
An example warning alert with an icon
95+
</div>
96+
<div class="alert alert-danger d-flex align-items-center">
97+
<i class="bi bi-x-octagon-fill me-2"></i>
98+
An example danger alert with an icon
99+
</div>
100+
</div>
101+
-----
102+
Python
103+
104+
```python
105+
import dash_bootstrap_components as dbc
106+
import dash_html_components as html
107+
108+
alerts = html.Div(
109+
[
110+
dbc.Alert(
111+
[
112+
html.I(class_name="bi bi-info-circle-fill me-2"),
113+
"An example info alert with an icon",
114+
],
115+
color="info",
116+
class_name="d-flex align-items-center",
117+
),
118+
dbc.Alert(
119+
[
120+
html.I(class_name="bi bi-check-circle-fill me-2"),
121+
"An example success alert with an icon",
122+
],
123+
color="success",
124+
class_name="d-flex align-items-center",
125+
),
126+
dbc.Alert(
127+
[
128+
html.I(class_name="bi bi-exclamation-triangle-fill me-2"),
129+
"An example warning alert with an icon",
130+
],
131+
color="warning",
132+
class_name="d-flex align-items-center",
133+
),
134+
dbc.Alert(
135+
[
136+
html.I(class_name="bi bi-x-octagon-fill me-2"),
137+
"An example danger alert with an icon",
138+
],
139+
color="danger",
140+
class_name="d-flex align-items-center",
141+
),
142+
]
143+
)
144+
```
145+
-----
146+
R
147+
148+
```r
149+
library(dashBootstrapComponents)
150+
library(dashHtmlComponents)
151+
152+
alerts <- htmlDiv(
153+
list(
154+
dbcAlert(
155+
list(
156+
htmlI(class_name = "bi bi-info-circle-fill me-2"),
157+
"An example info alert with an icon"
158+
),
159+
color = "info",
160+
class_name = "d-flex align-items-center"
161+
),
162+
dbcAlert(
163+
list(
164+
htmlI(class_name = "bi bi-check-circle-fill me-2"),
165+
"An example success alert with an icon"
166+
),
167+
color = "success",
168+
class_name = "d-flex align-items-center"
169+
),
170+
dbcAlert(
171+
list(
172+
htmlI(class_name = "bi bi-exclamation-triangle-fill me-2"),
173+
"An example warning alert with an icon"
174+
),
175+
color = "warning",
176+
class_name = "d-flex align-items-center"
177+
),
178+
dbcAlert(
179+
list(
180+
htmlI(class_name = "bi bi-x-octagon-fill me-2"),
181+
"An example danger alert with an icon"
182+
),
183+
color = "danger",
184+
class_name = "d-flex align-items-center"
185+
)
186+
)
187+
)
188+
```
189+
190+
-----
191+
Julia
192+
193+
```julia
194+
using DashBootstrapComponents, DashHtmlComponents
195+
196+
alerts = html_div([
197+
dbc_alert(
198+
[
199+
html_i(class_name = "bi bi-info-circle-fill me-2"),
200+
"An example info alert with an icon",
201+
],
202+
color = "info",
203+
class_name = "d-flex align-items-center",
204+
),
205+
dbc_alert(
206+
[
207+
html_i(class_name = "bi bi-check-circle-fill me-2"),
208+
"An example success alert with an icon",
209+
],
210+
color = "success",
211+
class_name = "d-flex align-items-center",
212+
),
213+
dbc_alert(
214+
[
215+
html_i(class_name = "bi bi-exclamation-triangle-fill me-2"),
216+
"An example warning alert with an icon",
217+
],
218+
color = "warning",
219+
class_name = "d-flex align-items-center",
220+
),
221+
dbc_alert(
222+
[
223+
html_i(class_name = "bi bi-x-octagon-fill me-2"),
224+
"An example danger alert with an icon",
225+
],
226+
color = "danger",
227+
class_name = "d-flex align-items-center",
228+
),
229+
])
230+
```
231+
~~~

‎docs/content/docs/quickstart.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ Check out these [example apps][examples] made with _dash-bootstrap-components_.
181181
[dash-docs]: https://dash.plotly.com
182182
[dash-docs-external]: https://dash.plotly.com/external-resources
183183
[docs-themes]: /docs/themes
184+
[docs-icons]: /docs/icons
184185
[docs-components]: /docs/components
185186
[bootstrapcdn]: https://www.bootstrapcdn.com/
186187
[examples]: /examples

0 commit comments

Comments
 (0)