document external SVG

README.md

@@ -290,6 +290,33 @@ Each time a new translation string is added to the code, you need to update the
 Once the new `messages.pot` is merged into the `dev` branch, it will automatically be updated in [CrowdIn](https://crowdin.com/project/smartcharts/settings#files). You should expect to see a PR with the title **New Crowdin translations**
  in a few minutes; this PR will update the `*.po` files.
 
+ ### Dealing With SVGs
+
+ SmartCharts has 2 ways of utilizing SVG files: as CSS background image and as external SVG.
+
+##### CSS Background Image SVG
+
+These SVG are added inline into the CSS via [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg). Currently the only place where this is used is the loader, because if the external SVG is not loaded yet we would at least want a loading screen to be present.
+
+ ##### External SVG
+
+ The SVG files included in the `js` and `jsx` files are automatically put together into a sprite sheet. Manipulating external SVG can be tricky - developers can only control stroke and fill color of the whole SVG file via CSS:
+
+ ```scss
+.ic-icon.active {
+    svg {
+        stroke: #2e8836;
+        fill: #ff3d38;
+    }
+}
+```
+
+ **Important Note:** These stroke and fill colors will not be affected by CSS if the corresponding attributes are declared in the SVG file.
+
+ This has much less freedom compared to [inline SVG](https://github.com/MoOx/react-svg-inline) where a developer can control individual parts of the SVG, but having external SVG results in a much smaller library, and allows parts of the code not rendered by React to use them. External SVG is also cached by the browser (using shadow DOM), so though the same SVG may be used multiple times, only one copy exists in the DOM.
+
+ Therefore, it is not uncommon SmartCharts developers would need to tweak the SVG files by hand to be able to manipulate its color. 
+
  ### State Management and the `connect` Method
 
  SmartCharts uses a variation of [Mobdux](https://medium.com/@cameronfletcher92/mobdux-combining-the-good-parts-of-mobx-and-redux-61bac90ee448) to assist with state management using Mobx.

webpack.config.js

@@ -34,7 +34,7 @@ const config = {
                         loader: 'svg-sprite-loader',
                         options: {
                             extract: true,
-                            spriteFilename: 'smartcharts-sprite-[hash:4].svg',
+                            spriteFilename: 'sprite-[hash:4].smartcharts.svg',
                         },
                     },
                     {