Skip to content

Commit

Permalink
updated package dependencies and README
Browse files Browse the repository at this point in the history
  • Loading branch information
davidruvolo51 committed Sep 6, 2020
1 parent fee13c0 commit fcd3705
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 35 deletions.
8 changes: 6 additions & 2 deletions DESCRIPTION
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Package: rheroicons
Title: The Heroicons library for use in R-based web projects
Version: 0.1.6
Version: 0.2.0
Authors@R:
person(given = "David",
family = "Ruvolo",
Expand All @@ -15,6 +15,10 @@ Roxygen: list(markdown = TRUE)
RoxygenNote: 7.1.0
Imports:
htmltools (>= 0.5.0),
shiny (>= 1.5.0)
shiny (>= 1.5.0),
cli,
stringr
Suggests:
testthat
Depends:
R (>= 2.10)
2 changes: 1 addition & 1 deletion NAMESPACE
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Generated by roxygen2: do not edit by hand

export(icons)
export(launch_gallery)
export(rheroicon)
11 changes: 11 additions & 0 deletions NEWS.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
# rheroicons 0.2.0

* New package structure :rocket: icons are now generated using the function `rheroicon`. Select an icon using the argument `name`. Icons can be found in the gallery via `launch_gallery()` function. Use the argument `type` to return define the icon style as `outline` or `solid`. Icons can be further customized by passing additional css classes using the `classnames` argument.
* Restructured rheroicons gallery as icons are available using an internal dataset. The gallery's ui, server, and modules are now located in `R/launch_gallery.R`. Static assets are still located in `inst/rheroicons-demo`.
* Rewrote unit tests

## rheroicons 0.1.6

* Updated to heroicons `v0.4.0`
* Redesigned icon gallery

## rheroicons 0.1.5

* Restructured `outline` and `solid` icon lists to `icons`. Rendering icon style is now done using the `type` argument. By default, `type = "outline"`.
Expand Down
64 changes: 36 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,60 +10,66 @@ The `rheroicons` provides access to the fantastic SVG icon collection [heroicons

## Install

Use `devtools` or `remotes` to install the `rheroicons`.

```r
devtools::install_github("davidruvolo51/rheroicons")
```

Use the rheroicons gallery to view all of the icons included in this package: [davidruvolo.shinyapps.io/rheroicons-demo/](https://davidruvolo.shinyapps.io/rheroicons-demo/). Alternatively, you can run the gallery locally.

## Use

There are well over a 200 icons in the collection and each icon has two styles (outline and solid). Icons can be found via the icon gallery. Click an icon name to copy the R code used to generate that icon.

```r
rheroicons::launch_gallery()
```

## Use

There are well over a hundred icons in the collection and each icon has two styles (outline and solid). All icons are available in the object `icons`.
Icons are created using the `rheroicon` function.

```r
# rheroicons version of `document-add`
rheroicons::icons$document_add()
rheroicons::rheroicon(name = "document_add")
```

\***NOTE** All icons that have a dash (`-`) in the original name were renamed using underscores (`_`).
\***NOTE**: You can use the [heroicons](https://heroicons.com) site to find icons. All icons that have a dash (`-`) in the original name were renamed using underscores (`_`).

### Arguments

All functions take the following arguments.

- `name`: an icon name
- `type`: select the icon style (either `outline` or `solid`; default `outline`)
- `id`: a unique ID to be applied to the SVG icon
- `class`: a CSS class to be applied to the SVG icon
- `aria_hidden`: should the icon be readable or hidden from screen readers (default `FALSE`)
- `title`: add a title that describes the purpose for using the icon (ideal when `aria_hidden` is `FALSE`)

*Note: The attribute `aria_hidden` is ideal for purely aesthetic icons*
- `classnames`: a CSS class to be applied to the SVG icon

```r
library(shiny)
tags$button(
id = "copy",
class = "btn",
tags$span("Add to clipboard"),
rheroicons::icons$clipboard_copy(
id = "copy-btn-icon",
class = "button-icons",
rheroicons::rheroicon(
name = "clipboard_copy",
type = "solid",
aria_hidden = TRUE
classnames = "btn__icons"
)
)
```

\***NOTE**: the default icon type is `outline`


### Customizing the appearance of icons

Use the arguments `id` and `class` to define a custom identifier that can be used to select in CSS or JavaScript.
Use the argument `class` to define a custom css classes that can be used to select icons via CSS or JavaScript.

```r
rheroicons::icons$clipboard_copy(type = "outline", id = "copy-icon", class = "my-icon-set")
# clipboard_copy icon
rheroicons::rheroicon(
name = "clipboard_copy",
type = "outline",
class = "my__ui__icons"
)
```

However, you may find it easier to use the predefined classes generated by this package. All icons have three types of CSS classes.
Expand All @@ -76,12 +82,14 @@ The following table displays the CSS clases by set for the `arrow_circle_down` i

set | rheroicons function | rheroicons css classes
:------ | :------------------ | :---------
outline | `icons$arrow_circle_down(type = "outline")` | `rheroicons rheroicons_outline rheroicons_arrow_circle_down`
solid | `icons$arrow_circle_down(type = "solid")` | `rheroicons rheroicons_solid rheroicons_arrow_circle_down`
outline | `rheroicon(name ="arrow_circle_down", type = "outline")` | `rheroicons rheroicons_outline rheroicons_arrow_circle_down`
solid | `rheroicon(name ="arrow_circle_down", type = "solid")` | `rheroicons rheroicons_solid rheroicons_arrow_circle_down`

In the Shiny UI, you can select items and style icons through CSS. Create a new `tags$style` element and define your styles (or use an external CSS file).

```r
library(shiny)

# ui
ui <- tagList(
tags$head(
Expand Down Expand Up @@ -149,18 +157,18 @@ ui <- tagList(
tags$main(
tags$h2("rheroicons"),
tags$div(
icons$arrow_circle_down(type = "outline"),
icons$arrow_circle_up(type = "outline"),
icons$arrow_circle_left(type = "outline"),
icons$arrow_circle_right(type = "outline")
rheroicon(name = "arrow_circle_down"),
rheroicon(name = "arrow_circle_up"),
rheroicon(name = "arrow_circle_left"),
rheroicon(name = "arrow_circle_right")
),
tags$div(
icons$chart_bar(type = "solid"),
icons$chart_bar(type = "outline"),
rheroicon(name = "chart_bar", type = "solid"),
rheroicon(name = "chart_bar")
),
tags$div(
icons$home(type = "solid"),
icons$home(type = "outline"),
rheroicon(name = "home", type = "solid"),
rheroicon(name = "home")
)
)
)
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rheroicons",
"version": "0.1.6",
"version": "0.2.0",
"author": "dcruvolo",
"license": "MIT",
"scripts": {
Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2904,9 +2904,9 @@ hash.js@^1.0.0, hash.js@^1.0.3:
minimalistic-assert "^1.0.1"

heroicons@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/heroicons/-/heroicons-0.4.0.tgz#6472b022bd689820ad49cbc84694d6f3a255fa30"
integrity sha512-CCPEBzBOJrliia0QL5tbR2E5MNlcrYcJhEB4m758RKh7h0vf9BjCqeOzKkIvASYPdOVld546Tixkg2i5ZAnkgA==
version "0.4.2"
resolved "https://registry.yarnpkg.com/heroicons/-/heroicons-0.4.2.tgz#edaffde42d14bffdd456f0566fd9b8e295ad69e2"
integrity sha512-24Bc6LKmamKHzGiNC80/r9v/7pQrma2V5KlaLUHGoarqm+hggmxnngU+RjHQT8sANWPa5FWKLftn4fpmvry/7w==

hex-color-regex@^1.1.0:
version "1.1.0"
Expand Down

0 comments on commit fcd3705

Please sign in to comment.