🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons

Last update: Jan 5, 2023

Overview

IconPark

Introduction

IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icons. Instead of using various SVG source files to achieve different themes, We implement a technology transforming attributes of a single SVG source file into multiple themes. Besides, we provide cross-platform components, including react-icons, vue-icons and svg-icons. So whether you are a designer or a developer, you can use them in your designs or your projects for free.

Packages

Generate Cross-platform Components

Find packages in packages folder. NPM packages make it painless to import icon components to your project.

Name	Github link	NPM link
React Icons	React Component	@icon-park/react
Vue2 Icons	Vue Component for old Vue2.0	@icon-park/vue
Vue3 Icons	Vue Component for Vue3.0	@icon-park/vue-next
SVG Icons	Pure SVG String	@icon-park/svg

Multiple themes

Basic coloring can be done by setting two attributes on the node: fill and stroke. Fill sets the color inside the object while stroke sets the color of the line drawn around the object. By changing this two attributes, you can transform a single SVG icon into different themes, including: outline, filled, two-tone, multi-color. Take the icon named camera for example:

Source file:

After Transforming:

React icons	Preview	Theme
`<Camera theme="outline" size="32" fill="#000000"/>`		Outline theme
`<Camera theme="filled" size="32" fill="#333"/>`		Filled theme
`<Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/>`		Two-tone theme
`<Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/>`		Multi-color theme

Embed IconPark in your project

If you need to use additional information such as icon name, author, category, label and creation time, you can use the icons.json file located in the root directory of each NPM.

Website

Customization

Here is the website of IconPark. Each icon is hand-coded within a 48x48 grid, using SVG stroke giving the maximum flexibility on styling. You can adjust the color, size, stroke-width, stroke-linejoin, stroke-linecap and other attributes to meet your needs.

Convenient Online Tools

You can use them in Figma, Sketch, Photoshop, PPT, etc.

Copy SVG
Copy React Icon Component
Copy Vue Icon Component
Download PNG
Download SVG

Changelog

CHANGELOG.en-US | CHANGELOG.简体中文

Contact Us

Lark

Comments

在Vue 2.x的版本中，遇见的问题。

1、全局安装图标，不够方便，还得自行处理。 2、全局配置问题，如果不配置，就会报 Injection "ICON_CONFIGS" 错误，但如果需要配置，就需要在自定义组件或在App.vue里配置，不能在main.js里配置，最主要的是，我不需要全局配置，就报错，非要我全局配置。。。 3、官方文档里，全局配置默认的prefix: 'icon'，会影响@icon-park的css失效，对于全局配置的参数，没有说明，css里，是i的前缀，而不是icon，所以，会失效，需要将prefix: 'icon' 改为 prefix: 'i'，或自行增加css代码处理。 4、名称问题，官方复制Vue代码时，没有前缀，而全局安装后，引入时，需要前缀加 icon- ，名称不统一。按需加载和单个引入，没测试，感觉问题挺多，有些失望。
bug

opened by iZaiZaiA 8

在vue3中使用ICON_CONFIGS默认值为undefined

代码如下: demo.vue

<template>
    <div>
        <More></More>
    </div>
</template>

<script lang="ts">
import { More } from '@icon-park/vue-next'

export default {
    components: {
        More
    },
    setup() {
        return {}
    }
}
</script>

页面报错

debugger

help wanted

opened by lhlyu 7

[BUG] 在Vue中, 是不是click事件没有向父组件emit, 导致我使用@click无法调用methods内的函数
[BUG] 在Vue中, 是不是click事件没有向父组件发送emit('click'), 导致我使用@click无法调用methods内的函数, 代码如下

<full-screen-one theme="outline" size="24" fill="#fff" @click="fullScreen" />

通过console发现, 并没有打印出我预期的结果, 换个方式说, 根本就没有调用到fullScreen函数
bug
opened by 1273082756 5
如何按照后端下发的图标名称, 进行按需加载
情景:

图标名称存储在数据库

前端根据后端下发的图标名称进行展示

当前实现方式:

引入全部图标, "@icon-park/react/es/all"

使用 type参数进行展示 <Icon type={图标名称}></Icon>

当前问题:

全部加载图标, 造成包体积过大

尝试方法和遇到的问题:

下载所有svg, 使用img的src进行展示, 问题: 无法改变颜色

懒加载无法根据服务器下载的图标名称, 进行展示

希望达成:

后端下发图标名称

前端根据图标名称加载图标

前端可根据情况, 改变图标颜色.

感谢大佬解答.
opened by zhangrunhao 4
Vue Icon Park 使用文档描述问题
环境:

[email protected]

[email protected]

[email protected]

按照文档使用

执行报错

检查发现 all.ts 中

if (!(type in IconMap)) { throw new Error(`${type} is not a valid icon type name`); }

解决方法，type 应该为大写，和 IconType 一样

<icon-park type="Home" theme="filled"/>

最后建议

修改文档为大写写法

或者

支持 x-y 这样的写法，和官网图标 name 一致

就我个人而言，我更习惯于第二种
bug
opened by peakcool 3
如何正确地配置 babel-plugin-import ？
在我的babel.config.js中，我的配置如下：

plugins = [ [ 'import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true, }, 'ant-design-vue', ], [ 'import', { libraryName: '@icon-park/vue', libraryDirectory: 'es/icons', camel2DashComponentName: false, }, '@icon-park/vue', ], ]

这样配置的话，就会导致import { DEFAULT_ICON_CONFIGS } from '@icon-park/vue'报错：DEFAULT_ICON_CONFIGS is not defined 在我查看了库目录之后，发现DEFAULT_ICON_CONFIGS的导出文件不在es/icons下，我猜测是没有正确配置libraryDirectory的原因导致报错，所以应该如何正确配置呢？期待解答~
bug
opened by Codennnn 3
Is @icon-park/compiler source code publicly available?

Hello, I'm looking to port this lib to Elixir. Right now, I'm only able to generate line-themed icons. The missing piece is the compiler that transforms and configures the SVG icons. It would be greatly appreciated if the compiler is available publicly.

opened by kokjinsam 0

Releases(v1.3.0)

v1.3.0(Feb 15, 2021)

Source code(tar.gz)
Source code(zip)

Owner

Bytedance Inc.

GitHub http://iconpark.bytedance.com/

Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, local file or post text.

Crayon Syntax Highlighter Supports multiple languages, themes, fonts, highlighting from a URL, local file or post text. Written in PHP and jQuery. Cra

1.1k Nov 26, 2022

Transform your icons with trendy animations.

iconate.js A call to transform your existing icons in a cool trendy way iconate.js is a tiny performant library for cross-browser icon transformation

2k Dec 27, 2022

Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

render-gfm Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes. GitHub Repository npm Package Do

12 Oct 10, 2022

A typescript transform that converts exported const enums into object literal.

ts-transformer-optimize-const-enum A typescript transformer that convert exported const enum into object literal. This is just like the one from @babe

22 Jul 27, 2022

The JavaScript library let’s you transform native tooltip’s into customizable overlays.

iTooltip The JavaScript library let’s you transform native tooltip’s into customizable overlays. Use: <script src="/path/to/iTooltip.js"></script> <sc

2 Dec 17, 2021

Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable.

Custom icon library Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable. Upon each Material Design

12 Dec 12, 2022

Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options e.g custom text or HTML message, duration, custom class, toggle close button, position, custom close icon and backgorund color.

Pure Javascript Toaster Requires Nothing Demo Toaster is a Pure Javascript plugin for displaying toast notifications. It comes with different options

2 Jun 21, 2022

True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

TRUE P2P CONCEPT - Lets redecentralize the web This repo is just conceptual. Active development of the endproduct (TRUE P2P) happens here https://gith

6 Mar 29, 2022

⚡🚀 Call multiple view functions, from multiple Smart Contracts, in a single RPC query!

ethers-multicall ⚡ ?? Call multiple view functions, from multiple Smart Contracts, in a single RPC query! Querying an RPC endpoint can be very costly

20 Dec 30, 2022

SVG icons for popular brands

Simple Icons Over 2200 Free SVG icons for popular brands. See them all on one page at SimpleIcons.org. Contributions, corrections & requests can be ma

14.7k Jan 1, 2023

Powershell scripts and Update script for Powershell configs and oh-my-posh themes

windows-powershell-autoconfig What is it? It is a NodeJS Project which updates your powershell and oh-my-posh scripts. Why should I use it? It is very

6 Dec 28, 2022

jQuery Tabs Plugin. CSS Tabs with Accessible and Responsive Design. Lot of Tab Themes with Vertical and Horizontal Orientation.

Macaw Tabs Macaw Tabs is jQuery tabs plugin. It helps you to create accessible and responsive jQuery tabs by implementing the W3 design patterns for t

6 Dec 8, 2022

Cloud function to generate basic icons, splash screens, and favicons.

Example: https://icogen.vercel.app/api/icon?color=white&padding=300&icon_id=1f1f1-1f1fa Can be used in Expo apps via app.json: { "expo": { "icon

13 Jan 2, 2023

Collection of customizable Anki flashcard templates with modern and clean themes.

Anki Templates Collection of customizable Anki flashcard templates with modern and clean themes. About Features Themes Instructions Add-on support Com

101 Dec 29, 2022

Statichunt is a free open-source Jamstack directory that lists hundreds of themes, starters, and resources for Jamstack sites.

Statichunt Statichunt is an open-source directory that enlists hundreds of themes, starters, and resources for static site generators submitted by the

12 Dec 29, 2022