dodo-icons, React ve Vue.js gibi web teknolojilerinde kullanılmak üzere geliştirilmiş bir ikon paketidir. Paket içinde birçok popüler ikon paketi yer almakta ve kullanıcılar istedikleri ikonu kolayca kullanabilmektedirler. Bu dokümantasyonda, dodo-icons paketinin nasıl kurulacağı, kullanılacağı ve özelleştirilebileceği hakkında bilgi verilecektir.
dodo-icons, NPM üzerinden tüm paketi yüklenerek projeye dahil edilebilir.
npm install dodo-icons
- Eğer sadece React için kullanmak istiyorsanız
npm install dodo-icons@0.2.0-react
- Eğer sadece Vue için kullanmak istiyorsanız
npm install dodo-icons@0.2.0-vue
dodo-icons, kullanılacak ikon paketi için özel olarak oluşturulmuş modüller içermektedir. İstenilen modül, projede kullanılacak dosyaya import edilerek kullanılabilir. Örneğin, Font Awesome 5 ikon paketinden bir ikon kullanmak isteniyorsa, şu şekilde bir import işlemi gerçekleştirilebilir:
import { FaBeer } from "dodo-icons/react/fa";
function Ikonlar() {
return (
<h3>
<FaBeer />
</h3>
);
}
import { FaBeer } from "dodo-icons/all";
function Ikonlar() {
return (
<h3>
<FaBeer />
</h3>
);
}
<template>
<Icons icon="WiAlien" color="" style="" class=""/>
</template>
<script>
import Icons from 'dodo-icons/vue/wi/'
export default {
components: {
Icons
}
}
</script>
Zorunluluk: React 16.3 yada üstü.
import { IconContext } from "dodo-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<div>
<FaFolder />
</div>
</IconContext.Provider>;
Ant Design Icons
BoxIcons
Bootstrap Icons
css.gg
Circum Icons
Devicons
Font Awesome 5
Flat Color Icons
Feather
Game Icons
Github Octicons icons
Grommet-Icons
Heroicons
Heroicons 2
IcoMoon Free
Ionicons 4
Ionicons 5
Material Design icons
Remix Icon
Radix Icons
Simple Icons
Simple Line Icons
Tabler Icons
Themify Icons
Typicons
VS Code Icons
Weather Icons