docs(readme): add FAQ (#1480)

* docs(Card): use standardized filenames

* docs(usage): use NavLinks instead of a tags

* docs(readme): cleanup and add FAQ

* refactor(docs): standardize name without hyphens

.github/CONTRIBUTING.md

@@ -301,7 +301,7 @@ A [`ui header`][5] accepts a size class.  The `ui modal` has a *component part*
 
 #### React Components & Sub Components
 
-Top level Semantic-UI-React components correspond to SUI *components*.  Stardust sub components correspond to SUI *component parts*.
+Top level Semantic UI React components correspond to SUI *components*.  Stardust sub components correspond to SUI *component parts*.
 
 This allows us to provide accurate `propTypes` validation.  It also separates concerns, isolating features and tests.
 

.github/ISSUE_TEMPLATE.md

@@ -2,7 +2,7 @@ CSS issue?
 -----------------
 Post on https://github.com/Semantic-Org/Semantic-UI.
 
-Semantic-UI-React only concerns itself with React components that render valid Semantic-UI markup. There is no HTML nor CSS code in this project.
+Semantic UI React only concerns itself with React components that render valid Semantic-UI markup. There is no HTML nor CSS code in this project.
 
 Duplicate?
 -----------------
@@ -12,7 +12,7 @@ Usage question?
 -----------------
 We have superb docs at http://react.semantic-ui.com.  They show all components and props including extensive live editable usage examples.
 
-Tip: The doc site itself is a React app built with Semantic-UI-React.  You can see how we setup Webpack, handle CSS, and advanced components by looking at the `/docs` in this repo itself.
+Tip: The doc site itself is a React app built with Semantic UI React.  You can see how we setup Webpack, handle CSS, and advanced components by looking at the `/docs` in this repo itself.
 
 <!--------------------------------- Still an issue? Let us know! --------------------------------->
 

README.md

@@ -40,19 +40,33 @@ Hey, we're in development. Prior to reaching [v1.0.0][6]:
 
 See the [Documentation][2] for an introduction, usage information, and extensive examples.
 
-## [Documentation][2] :blue_book:
+## Example Projects
 
+This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects.
 
-## Examples & Tutorials
+### [semantic-ui-react-todos][100]
+This example modifies the well-known [react-redux Todo List][101] to use Semantic UI components. There is also a write-up on the process in the project README.
 
-This is a listing of example projects and guides that will help you integrate Semantic-UI-React into your new or existing projects.
+## FAQ
 
-- [semantic-ui-react-todos](https://github.com/wyc/semantic-ui-react-todos): This example modifies the well-known [react-redux Todo List](https://github.com/reactjs/redux/tree/master/examples/todos) to use Semantic UI components. There is also a write-up on the process in the project README.
+### Can I use custom Icons?
+Yes.  Just use `<Icon className='my-icon' />` instead of `<Icon name='my-icon' />`.  See https://github.com/Semantic-Org/Semantic-UI-React/issues/931#issuecomment-263643210 for detailed info and examples.
 
+### How do I setup CSS?
+There are several options.  Refer to our doc on [CSS Usage][23].
 
-## Built With Semantic-UI-React
+### Can I use a customize CSS theme?
+Yes.  Semantic UI React includes components that render valid Semantic UI HTML, no CSS is included.  This allows you to load any Semantic UI CSS theme on top of your Semantic UI React app.
 
-These great products are built on Semantic-UI-React. Add yours [here][22].
+Here are some helpful links:
+
+- [Building CSS with Webpack][24]
+- [Building CSS with Meteor][26]
+- [Creating a standalone theme][25]
+
+## Built With Semantic UI React
+
+These great products are built on Semantic UI React. Add yours [here][22].
 
 - http://stoplight.io
 - https://roadmap.space
@@ -61,11 +75,11 @@ These great products are built on Semantic-UI-React. Add yours [here][22].
 - http://www.brewhousesolutions.com
 - https://www.lifebot.fr
 
-## Voice Your Opinion :speech_balloon:
+## Voice Your Opinion
 
 Help shape this library by weighing in on our [RFC (request for comments)][19] issues. 
 
-## How Can I Help? :hand:
+## How Can I Help?
 
 Our [CONTRIBUTING.md][1] is a step-by-step setup and development guide. It is meant to be read from top to bottom.  Once you're up to speed, each issue here includes more information on how you can help:
 
@@ -115,7 +129,7 @@ Once you change the flag, you need to refresh your browser to see the changes in
 
 ## Our Principles
 
-[TechnologyAdvice][9] has been [dogfooding][10] Semantic-UI-React in production since fall of 2015.  These are the guiding principles that have developed as a result:
+[TechnologyAdvice][9] has been [dogfooding][10] Semantic UI React in production since fall of 2015.  These are the guiding principles that have developed as a result:
 
 - No jQuery dependency
 - No animation dependencies
@@ -183,3 +197,10 @@ Big thanks to our [contributors][20], especially:
 [20]: https://github.com/Semantic-Org/Semantic-UI-React/graphs/contributors
 [21]: https://github.com/Semantic-Org/Semantic-UI-React/labels/good%20first%20contribution
 [22]: https://github.com/Semantic-Org/Semantic-UI-React/edit/master/README.md
+[23]: http://react.semantic-ui.com/usage#css
+[24]: https://github.com/Semantic-Org/Semantic-UI-React/issues/802#issuecomment-258990274
+[25]: http://learnsemantic.com/themes/creating.html
+[26]: https://github.com/Semantic-Org/Semantic-UI-Meteor
+<!-- Examples -->
+[100]: https://github.com/wyc/semantic-ui-react-todos
+[101]: https://github.com/reactjs/redux/tree/master/examples/todos

docs/app/Components/Sidebar/Sidebar.js

@@ -182,7 +182,7 @@ class Sidebar extends Component {
         <Menu.Item>
           <Logo spaced='right' size='mini' />
           <strong>
-            Semantic-UI-React &nbsp;
+            Semantic UI React &nbsp;
             <small><em>{pkg.version}</em></small>
           </strong>
         </Menu.Item>

docs/app/Examples/views/Card/Content/CardExampleLinkCard.js

@@ -3,7 +3,7 @@ import { Card } from 'semantic-ui-react'
 
 const CardExampleLinkCard = () => (
   <Card
-    href='#link'
+    href='#card-example-link-card'
     header='Elliot Baker'
     meta='Friend'
     description='Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'

docs/app/Examples/views/Card/Types/CardExampleIndividualCard.js → docs/app/Examples/views/Card/Types/CardExampleCard.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card, Icon, Image } from 'semantic-ui-react'
 
-const CardExampleIndividualCard = () => (
+const CardExampleCard = () => (
   <Card>
     <Image src='/assets/images/avatar/large/matthew.png' />
     <Card.Content>
@@ -26,4 +26,4 @@ const CardExampleIndividualCard = () => (
   </Card>
 )
 
-export default CardExampleIndividualCard
+export default CardExampleCard

docs/app/Examples/views/Card/Types/CardExampleIndividualCardProps.js → docs/app/Examples/views/Card/Types/CardExampleCardProps.js

@@ -8,7 +8,7 @@ const extra = (
   </a>
 )
 
-const CardExampleIndividualCardProps = () => (
+const CardExampleCardProps = () => (
   <Card
     image='/assets/images/avatar/large/elliot.jpg'
     header='Elliot Baker'
@@ -18,4 +18,4 @@ const CardExampleIndividualCardProps = () => (
   />
 )
 
-export default CardExampleIndividualCardProps
+export default CardExampleCardProps

docs/app/Examples/views/Card/Types/index.js

@@ -8,11 +8,11 @@ const Types = () => (
     <ComponentExample
       title='Card'
       description='A card displays site content in a manner similar to a playing card.'
-      examplePath='views/Card/Types/CardExampleIndividualCard'
+      examplePath='views/Card/Types/CardExampleCard'
     />
     <ComponentExample
       description='You can also use props to configure the markup.'
-      examplePath='views/Card/Types/CardExampleIndividualCardProps'
+      examplePath='views/Card/Types/CardExampleCardProps'
     />
     <ComponentExample
       title='Cards'

docs/app/Views/Introduction.js

@@ -143,7 +143,7 @@ const Introduction = () => (
     <Segment basic textAlign='center'>
       <Logo centered size='small' />
       <Header as='h1' textAlign='center'>
-        Semantic-UI-React
+        Semantic UI React
         <Header.Subheader>
           {pkg.description}
         </Header.Subheader>
@@ -153,7 +153,7 @@ const Introduction = () => (
     <Segment basic padded>
       <Header as='h2' dividing>Introduction</Header>
       <p>
-        Semantic-UI-React is the official React integration for <a href={semanticUIDocsURL}>Semantic UI</a> .
+        Semantic UI React is the official React integration for <a href={semanticUIDocsURL}>Semantic UI</a> .
       </p>
       <List>
         <List.Item icon='check' content='jQuery Free' />

docs/app/Views/Usage.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import pkg from 'package.json'
+import { NavLink } from 'react-router-dom'
 import {
   Button,
   Container,
@@ -16,7 +17,7 @@ const Usage = () => (
     <Segment basic textAlign='center'>
       <Logo centered size='small' />
       <Header as='h1' textAlign='center'>
-        Semantic-UI-React
+        Semantic UI React
         <Header.Subheader>
           {pkg.description}
         </Header.Subheader>
@@ -42,22 +43,22 @@ const Usage = () => (
       </p>
       <Header as='h3'>Examples</Header>
       <p>
-          For examples on how to import and use Semantic UI React components,
-          click the code icon next to any example. Here are a few direct links:
+        For examples on how to import and use Semantic UI React components,
+        click the code icon next to any example. Here are a few direct links:
       </p>
       <ul>
-          <li>
-              <a href='http://react.semantic-ui.com/elements/button#button'>Button</a>
-          </li>
-          <li>
-              <a href='http://react.semantic-ui.com/elements/list#list'>List</a>
-          </li>
-          <li>
-              <a href='http://react.semantic-ui.com/views/card#card'>Card</a>
-          </li>
-          <li>
-              <a href='http://react.semantic-ui.com/modules/modal#modal'>Modal</a>
-          </li>
+        <li>
+          <NavLink to='/elements/button#button-example-button'>Button</NavLink>
+        </li>
+        <li>
+          <NavLink to='/elements/list#list-example-list'>List</NavLink>
+        </li>
+        <li>
+          <NavLink to='/views/card#card-example-card'>Card</NavLink>
+        </li>
+        <li>
+          <NavLink to='/modules/modal#modal-example-modal'>Modal</NavLink>
+        </li>
       </ul>
     </Segment>
 

docs/app/index.ejs

@@ -26,7 +26,7 @@
           <div class="ui inverted teal header">
             Loading docs...
             <div class="sub header">
-              Semantic-UI-React
+              Semantic UI React
               v<%= htmlWebpackPlugin.options.versions.suir %>
             </div>
           </div>