Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@naturacosmeticos/natds-icons
Advanced tools
You can search for the names of the icons you need in our Natura Design System website.
ℹ️ Note that the availability of the icons may vary depending on the version you use, so always try to use the latest stable version of
natds-icons
.
If you are developing for theses platforms, you can check out our component libraries for: Android (natds-android), iOS (natds-ios), React (natds-web), and React Native (natds-rn).
Here you can find more instructions on how to use natds-icons
along with those libraries:
npm install --save @naturacosmeticos/natds-icons
yarn add @naturacosmeticos/natds-icons
This library is available to use from both unpkg
and jsdelivr
. You can load the files from this networks using URLs that points directly to the files you want, like this:
https://unpkg.com/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css
Or this:
https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css
⚠️ You can replace
latest
by the better version for your project. We recommend you always use the latest stable version.
Check out unpkg and jsdelivr to see the files you can import and their complete URLs.
ℹ️ Working with TypeScript?
We also provide declaration files for CSS and JSON, so you can avoid the
"Could not find a declaration file for module"
error.
Load the font icons from the package @naturacosmeticos/natds-icons
:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css">
or load it from node_modules
with a module bundler like webpack
or rollup
main.js:
import React from 'react';
import '@naturacosmeticos/natds-icons/natds-icons.css';
webpack.config.js:
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" },
// ...
]
}
};
After that, you can insert an icon by adding the name of the icon class to any inline HTML element. Like this example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@latest/dist/natds-icons.css">
</head>
<body>
<i class="natds-icons natds-icons-filled-action-love"></i>
</body>
</html>
The <i>
and <span>
elements are widely used to add icons.
All the icons can be customized with CSS (size, color, shadow, etc.), but we recommend using the class names provided to make it easier to stick to our overall design guidelines.
If you need a customization that is not provided yet, please consider contributing, or you can create an issue.
You can use the SVG files for the icons individually by importing them from the ./dist/svg folder or CDN. Like this example:
<!DOCTYPE html>
<html>
<body>
<img src="https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@1.0.3/dist/svg/filled-action-rating.svg" alt="star icon">
</body>
</html>
Or like this:
<!DOCTYPE html>
<html>
<body>
<a href="/" class="rating-star">
Rate this product!
</a>
</body>
</html>
.rating-star {
display: block;
text-indent: -9999px;
background: url(https://cdn.jsdelivr.net/npm/@naturacosmeticos/natds-icons@1.0.3/dist/svg/filled-action-rating.svg);
}
In order to use natds-icons
in an Android project, you must add a new dependency.
To download the dependency it is necessary to use a Github active account. You Can create in your project a file - for ex: github_credentials
- with properties and fill it with Github username and Access token. For getting your GitHub access token see the Tutorial. Its important to check read:packages
when generating you password. In the file build.gradle
, insert these informations:
repositories {
def githubProperties = new Properties()
def githubFile = rootProject.file("github_credentials.properties")
if (githubFile.exists()) {
githubProperties.load(new FileInputStream(githubFile))
}
//To Access Nat DS Icons dependency at Github Packages
maven {
name = "natds-commons"
url = uri("https://maven.pkg.github.com/natura-cosmeticos/natds-commons")
credentials {
username = githubProperties['github.username'] ?: System.getenv("GITHUB_USERNAME")
password = githubProperties['github.password'] ?: System.getenv("GITHUB_API_KEY")
}
}
}
And:
dependencies {
implementation "com.natura:icons:$rootProject.<version>"
}
With the dependency configured, you can access our icons as drawables. 😃
To use NatDS Icons, you MUST add a new pod to your project. You must specify it in your Podfile
:
target '<Your Target Name>' do
pod 'NatDSIcons'
end
Check the documentation on how to use icons.
To contribute, please check our Contributing guidelines.
FAQs
A collection of icons for Natura & Co. Design System
We found that @naturacosmeticos/natds-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.