Skip to content
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

feat(icons): added trending-up-down icon #2372

Merged
merged 11 commits into from
Aug 23, 2024

Conversation

Alportan
Copy link
Contributor

@Alportan Alportan commented Aug 15, 2024

What is the purpose of this pull request?

  • New Icon

Description

Added new trending-up-down icon.

Icon use case

  • showcasing estimated data
  • explain that data might change

Alternative icon designs

Icon Design Checklist

Concept

  • I have provided valid use cases for each icon.
  • I have not added any a brand or logo icon.
  • I have not used any hate symbols.
  • I have not included any religious or political imagery.

Author, credits & license

Naming

  • I've read and followed the naming conventions
  • I've named icons by what they are rather than their use case.
  • I've provided meta JSON files in icons/trending-up-down.json.

Design

  • I've read and followed the icon design guidelines
  • I've made sure that the icons look sharp on low DPI displays.
  • I've made sure that the icons look consistent with the icon set in size, optical volume and density.
  • I've made sure that the icons are visually centered.
  • I've correctly optimized all icons to three points of precision.

Before Submitting

@github-actions github-actions bot added 🎨 icon About new icons 🫧 metadata Improved metadata labels Aug 15, 2024
Copy link

github-actions bot commented Aug 15, 2024

Added or changed icons

icons/trending-up-down.svg

Preview cohesion icons/square-pen.svg
icons/trending-up-down.svg
icons/redo-2.svg
Preview stroke widths icons/trending-up-down.svg
icons/trending-up-down.svg
icons/trending-up-down.svg
DPI Preview (24px) icons/trending-up-down.svg
Icon X-rays icons/trending-up-down.svg
Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const TrendingUpDownIcon = createLucideIcon('TrendingUpDown', [
  ["path",{"d":"M14.828 14.828 21 21"}],
  ["path",{"d":"M21 16v5h-5"}],
  ["path",{"d":"m21 3-9 9-4-4-6 6"}],
  ["path",{"d":"M21 8V3h-5"}]
])

@VIKTORVAV99
Copy link
Contributor

For reference this is an icon we are already using at Electricity Maps in our app here: https://app.electricitymaps.com

We are currently in the process of migrating all our SVG (file) icons and FontAwesome icons to Lucide and this is one of the icons that don't have a direct replacement in Lucide.

@karsa-mistmere
Copy link
Member

karsa-mistmere commented Aug 16, 2024

Hey @Alportan,

I'm afraid the arrows have a gap violation. Something like this could work (although I do feel like the arrow heads are a tiny bit too small):

icons
Open lucide studio

Edit: variant with slightly larger arrow heads:

icons
Open lucide studio

@karsa-mistmere
Copy link
Member

Addendum: I'm also not super sure about the name, chart-arrows is very generic, it could mean anything. I think this should be something more along the lines of chart-trending-indeterminate or something similar (let's first agree on a name before you do the rename though, this is just me thinking out loud).

@Alportan
Copy link
Contributor Author

Alportan commented Aug 16, 2024

Hi @karsa-mistmere, thanks for getting back so fast!

I'm afraid the arrows have a gap violation. Something like this could work (although I do feel like the arrow heads are a tiny bit too small):

I think the second version (with slightly larger arrow heads) works really well 🙌 How do I push the new version for review in the same PR?

Addendum: I'm also not super sure about the name, chart-arrows is very generic, it could mean anything. I think this should be something more along the lines of chart-trending-indeterminate or something similar (let's first agree on a name before you do the rename though, this is just me thinking out loud).

Hmmm, good point! I like your suggestion, although "indeterminate" sounds a bit technical. Maybe chart-trending-undefined could work? What do you think?

Alternatively, thinking about a future scenario of having a set of 3 trending chart icons, we could have chart-trending-up, chart-trending-down and chart-trending-up-down (for this icon). This is a bit more future-proof.

@jguddas
Copy link
Member

jguddas commented Aug 16, 2024

Those tiny arrows are pretty dense :/

@Alportan
Copy link
Contributor Author

Open lucide studio

Yeah, was just looking into how to solve that. I tried making them even longer (but still under the guidelines).
Open lucide studio

@jguddas
Copy link
Member

jguddas commented Aug 16, 2024

icon
icons
Open lucide studio

@karsa-mistmere
Copy link
Member

icon iconsOpen lucide studio

Personally, I think this has even worse density. 🤔

I also don't like how not all of the lines are at a 45deg angle.

@jguddas
Copy link
Member

jguddas commented Aug 16, 2024

This one also has the big arrows, but I feel like it's ugly.
icon
icons
Open lucide studio

@Alportan
Copy link
Contributor Author

Alternatively, we can also drop the chart element and simply go with arrows instead.

Icon name: arrows-trending-up-down.

icons
Open lucide studio

@jguddas
Copy link
Member

jguddas commented Aug 16, 2024

Alternatively, we can also drop the chart element and simply go with arrows instead.

Icon name: arrows-trending-up-down.

iconsOpen lucide studio

That's not bad, have it be like a trending-up-down icon.

- removed the chart part
- updated name
- updated tags
- changed category
@Alportan Alportan changed the title feat(icons): added chart-arrows icon feat(icons): added trending-up-down icon Aug 16, 2024
@Alportan
Copy link
Contributor Author

I updated the source files as well as the name, but now it seems like it encountered a problem in deploying a preview via vercel @karsa-mistmere. What should I do in this case? (still a GitHub newbie here 🙈 )

icons/trending-up-down.json Outdated Show resolved Hide resolved
icons/trending-up-down.json Show resolved Hide resolved
icons/trending-up-down.svg Outdated Show resolved Hide resolved
Alportan and others added 3 commits August 16, 2024 14:56
Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Karsa <contact@karsa.org>
@Alportan
Copy link
Contributor Author

Thanks @karsa-mistmere! Applied your suggestions 💪

sanchitrk added a commit to zyghq/zyg that referenced this pull request Sep 18, 2024
![snyk-top-banner](https://github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)


<h3>Snyk has created this PR to upgrade lucide-react from 0.379.0 to
0.435.0.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.

<hr/>


- The recommended version is **50 versions** ahead of your current
version.

- The recommended version was released on **21 days ago**.



<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>lucide-react</b></summary>
    <ul>
      <li>
<b>0.435.0</b> - <a
href="https://github.com/lucide-icons/lucide/releases/tag/0.435.0">2024-08-23</a></br><h2>Modified
Icons 🔨</h2>
<ul>
<li><code>milestone</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2389170587"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2281"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2281/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2281">#2281</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/jguddas/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/jguddas">@ jguddas</a></li>
<li><code>signpost</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2389170587"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2281"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2281/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2281">#2281</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/jguddas/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/jguddas">@ jguddas</a></li>
</ul>
      </li>
      <li>
<b>0.434.0</b> - <a
href="https://github.com/lucide-icons/lucide/releases/tag/0.434.0">2024-08-23</a></br><h2>New
icons 🎨</h2>
<ul>
<li><code>volume-off</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2470475482"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2378"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2378/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2378">#2378</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/karsa-mistmere/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/karsa-mistmere">@ karsa-mistmere</a></li>
</ul>
<h2>Modified Icons 🔨</h2>
<ul>
<li><code>file-volume</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2470475482"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2378"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2378/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2378">#2378</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/karsa-mistmere/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/karsa-mistmere">@ karsa-mistmere</a></li>
<li><code>volume-1</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2470475482"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2378"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2378/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2378">#2378</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/karsa-mistmere/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/karsa-mistmere">@ karsa-mistmere</a></li>
<li><code>volume-2</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2470475482"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2378"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2378/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2378">#2378</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/karsa-mistmere/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/karsa-mistmere">@ karsa-mistmere</a></li>
<li><code>volume-x</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2470475482"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2378"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2378/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2378">#2378</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/karsa-mistmere/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/karsa-mistmere">@ karsa-mistmere</a></li>
<li><code>volume</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2470475482"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2378"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2378/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2378">#2378</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/karsa-mistmere/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/karsa-mistmere">@ karsa-mistmere</a></li>
</ul>
      </li>
      <li>
<b>0.433.0</b> - <a
href="https://github.com/lucide-icons/lucide/releases/tag/0.433.0">2024-08-23</a></br><h2>New
icons 🎨</h2>
<ul>
<li><code>trending-up-down</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2467900248"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2372"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2372/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2372">#2372</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/Alportan/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/Alportan">@ Alportan</a></li>
</ul>
<h2>Fixes Lucide Solid</h2>
<ul>
<li>Fixed compilation issues when starting up Vite Dev server by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/ericfennis/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/ericfennis">@ ericfennis</a> in <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="2470215746" data-permission-text="Title is private"
data-url="lucide-icons/lucide#2375"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2375/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2375">#2375</a></li>
</ul>
      </li>
      <li>
<b>0.432.0</b> - <a
href="https://github.com/lucide-icons/lucide/releases/tag/0.432.0">2024-08-23</a></br><h2>New
icons 🎨</h2>
<ul>
<li><code>chart-gantt</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2472141724"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2392"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2392/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2392">#2392</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/jguddas/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/jguddas">@ jguddas</a></li>
</ul>
<h2>Modified Icons 🔨</h2>
<ul>
<li><code>contact-round</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2472125869"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2391"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2391/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2391">#2391</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/jguddas/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/jguddas">@ jguddas</a></li>
<li><code>contact</code> (<a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="2472125869"
data-permission-text="Title is private"
data-url="lucide-icons/lucide#2391"
data-hovercard-type="pull_request"
data-hovercard-url="/lucide-icons/lucide/pull/2391/hovercard"
href="https://github.com/lucide-icons/lucide/pull/2391">#2391</a>) by <a
class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/jguddas/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://github.com/jguddas">@ jguddas</a></li>
</ul>
      </li>
      <li>
        <b>0.429.0</b> - 2024-08-21
      </li>
      <li>
        <b>0.428.0</b> - 2024-08-16
      </li>
      <li>
        <b>0.427.0</b> - 2024-08-09
      </li>
      <li>
        <b>0.426.0</b> - 2024-08-08
      </li>
      <li>
        <b>0.425.0</b> - 2024-08-08
      </li>
      <li>
        <b>0.424.0</b> - 2024-08-02
      </li>
      <li>
        <b>0.423.0</b> - 2024-08-02
      </li>
      <li>
        <b>0.422.0</b> - 2024-08-02
      </li>
      <li>
        <b>0.421.0</b> - 2024-08-02
      </li>
      <li>
        <b>0.420.0</b> - 2024-08-02
      </li>
      <li>
        <b>0.419.0</b> - 2024-08-01
      </li>
      <li>
        <b>0.418.0</b> - 2024-07-31
      </li>
      <li>
        <b>0.417.0</b> - 2024-07-28
      </li>
      <li>
        <b>0.416.0</b> - 2024-07-25
      </li>
      <li>
        <b>0.415.0</b> - 2024-07-25
      </li>
      <li>
        <b>0.414.0</b> - 2024-07-22
      </li>
      <li>
        <b>0.413.0</b> - 2024-07-22
      </li>
      <li>
        <b>0.412.0</b> - 2024-07-20
      </li>
      <li>
        <b>0.411.0</b> - 2024-07-19
      </li>
      <li>
        <b>0.410.0</b> - 2024-07-19
      </li>
      <li>
        <b>0.409.0</b> - 2024-07-19
      </li>
      <li>
        <b>0.408.0</b> - 2024-07-12
      </li>
      <li>
        <b>0.407.0</b> - 2024-07-09
      </li>
      <li>
        <b>0.406.0</b> - 2024-07-09
      </li>
      <li>
        <b>0.405.0</b> - 2024-07-09
      </li>
      <li>
        <b>0.404.0</b> - 2024-07-09
      </li>
      <li>
        <b>0.403.0</b> - 2024-07-08
      </li>
      <li>
        <b>0.402.0</b> - 2024-07-08
      </li>
      <li>
        <b>0.401.0</b> - 2024-07-07
      </li>
      <li>
        <b>0.400.0</b> - 2024-07-01
      </li>
      <li>
        <b>0.399.0</b> - 2024-06-28
      </li>
      <li>
        <b>0.398.0</b> - 2024-06-28
      </li>
      <li>
        <b>0.397.0</b> - 2024-06-26
      </li>
      <li>
        <b>0.396.0</b> - 2024-06-21
      </li>
      <li>
        <b>0.395.0</b> - 2024-06-14
      </li>
      <li>
        <b>0.394.0</b> - 2024-06-10
      </li>
      <li>
        <b>0.391.0</b> - 2024-06-10
      </li>
      <li>
        <b>0.390.0</b> - 2024-06-06
      </li>
      <li>
        <b>0.387.0</b> - 2024-06-06
      </li>
      <li>
        <b>0.386.0</b> - 2024-06-06
      </li>
      <li>
        <b>0.385.0</b> - 2024-06-06
      </li>
      <li>
        <b>0.384.0</b> - 2024-06-06
      </li>
      <li>
        <b>0.383.0</b> - 2024-06-02
      </li>
      <li>
        <b>0.382.0</b> - 2024-06-02
      </li>
      <li>
        <b>0.381.0</b> - 2024-05-30
      </li>
      <li>
        <b>0.380.0</b> - 2024-05-30
      </li>
      <li>
        <b>0.379.0</b> - 2024-05-21
      </li>
    </ul>
from <a
href="https://github.com/lucide-icons/lucide/releases">lucide-react
GitHub release notes</a>
  </details>
</details>

---

> [!IMPORTANT]
>
> - Check the changes in this PR to ensure they won't cause issues with
your project.
> - This PR was automatically created by Snyk using the credentials of a
real user.

---

**Note:** _You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs._

**For more information:** <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI5YWMzODA0MS1hMGJmLTQ0ODgtYTk0NC04MDkxZjZlZDk0YTUiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjlhYzM4MDQxLWEwYmYtNDQ4OC1hOTQ0LTgwOTFmNmVkOTRhNSJ9fQ=="
width="0" height="0"/>

> - 🧐 [View latest project
report](https://app.snyk.io/org/sanchitrk/project/9a9f7a5d-de7e-4f88-93a2-a4ae7546f8c7?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 📜 [Customise PR
templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates)
> - 🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/sanchitrk/project/9a9f7a5d-de7e-4f88-93a2-a4ae7546f8c7/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/sanchitrk/project/9a9f7a5d-de7e-4f88-93a2-a4ae7546f8c7/settings/integration?pkg&#x3D;lucide-react&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

[//]: #
'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"lucide-react","from":"0.379.0","to":"0.435.0"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"9ac38041-a0bf-4488-a944-8091f6ed94a5","prPublicId":"9ac38041-a0bf-4488-a944-8091f6ed94a5","packageManager":"npm","priorityScoreList":[],"projectPublicId":"9a9f7a5d-de7e-4f88-93a2-a4ae7546f8c7","projectUrl":"https://app.snyk.io/org/sanchitrk/project/9a9f7a5d-de7e-4f88-93a2-a4ae7546f8c7?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":50,"publishedDate":"2024-08-23T09:34:04.739Z"},"vulns":[]}'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎨 icon About new icons 🫧 metadata Improved metadata
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants