San-Awesome
This repository is a fork of vue-awesome
.
Awesome SVG icon component for San, with built-in Font Awesome icons.
San-Awesome an SVG icon component for San, with built-in icons courtesy of Font Awesome.
Check out the demo here.
Installation
npm (Recommended)
$ npm install san-awesome
Usage
<!-- basic --> <!-- with options --> <!-- stacked icons -->
Font Awesome 5 has separated all icons into several packs. San-Awesome is built upon its all free icons, which includes all free icons from 3 icon packs: regular
, solid
and brands
. Since the solid
pack has the most number of icons, we organize all Vue-Awesome icons as follows:
-
All icons from
solid
pack are located insan-awesome/icons
directory and have unprefixedname
prop values. -
Icons from
regular
andbrands
are located insan-awesome/icons/regular
andsan-awesome/icons/brands
, which have prefixedname
prop values likeregular/flag
orbrands/reddit
.
You can find all available name
values from Font Awesome's website like beer
, file
and camera
.
ES Modules with NPM (Recommended)
/* Pick one way between the 2 following ways */ // only import the icons you use to reduce bundle size // or import all icons if you don't care about bundle size /* Register component with one of 2 methods */ // locally (in your component file) components: icon: Icon
⚠️ Heads up
Importing the souce version
If you are using webpack
to create your project and you want to use the untranspiled component (import san-awesome/components/Icon
rather than import san-awesome
directly, to optimize bundle size, which is recommended), you may change webpack.conf.js
like this:
{ test: /\.js$/, loader: 'babel-loader',- include: [resolve('src'), resolve('test')]+ include: [resolve('src'), resolve('test'), resolve('node_modules/san-awesome')] }
CommonJS with NPM without ES Next support
var san = // requiring the UMD modulevar Icon = // or use build-in method of sanvar Icon = san; // register component to use
Misc
If you are using san-awesome/components/Icon
(instead of the whole bundled version), San-Awesome won't import a single icon by default. Do not forget to import icons you want to use.
If these caveats don't help and there are no proper workarounds in earlier issues, please feel free to file a new one.
Styling
Dynamic sizing
You can make the icons scale dynamically according to your font-size
by adding the following CSS:
Colors
The icon color is inherited from the font color of the parent element by default. You can easily change it to any other color by specifying the color
property.
Local development
$ npm i$ npm run dev
Open http://localhost:8080/demo
to see the demo.
Updating icons
Don't touch files in src/icons
but update assets/svg/*
instead and run npm run icons
to re-generate icon module files.
Registering custom icons
Simple case
You can register custom icons like this:
More advanced cases
If your SVG file has more than one path or polygon, and/or you want to have a predefined style, you can register like this:
Paths
Polygons
Raw SVG